您的位置：首页 > Web前端 > AngularJS

angularjs指令

2015-09-30 16:41 621 查看

angularjs为了减少dom对象的操作，故而它通过指令对常见的文本框，文本域，下拉框都做了规定，以方便angularjs的规范。

一、控件指令

1.文本框、密码框、邮件框、数字框

<input
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-minlength=""]
[ng-maxlength=""]
[ng-pattern=""]
[ng-change=""]
[ng-trim=""]>
...
</input>

ng-required值为true/false，表示是否必填。

ng-pattern：值为正则表达式，提供正则表达式的匹配结果作为input框的值

ng-trim：自动去掉文本框中内容前面后后面的空白。默认值为true。

2.单选框

<input type="radio"
ng-model=""
value=""
[name=""]
[ng-change=""]
ng-value="">

ng-value可以替代value，value表示的是一个单选按钮被选中后的值，而ng-value的值可以是一个对象，而不是单一的值。

例如：

<input type="radio" name="colorname" value="{{color.name}}" data-ng-model="colordata" >

3.多选框

<input type="checkbox"
ng-model=""
[name=""]
[ng-true-value=""]
[ng-false-value=""]
[ng-change=""]>

ng-true-value：多选框被选中后的值，如果不设置该属性，那么默认被选中的值为true。

ng-false-value：多选框取消选择后的值，如果不设置该属性，那么默认值为false。

4.日期框、时间框

<input type="date"
ng-model=""
[name=""]
[min=""]
[max=""]
[required=""]
[ng-required=""]
[ng-change=""]>

min：输入的日期小于该值时检验不通过，值必须是yyyy-MM-dd

max：输入的日期大于该值时校验不通过，值必须是yyyy-MM-dd

二、写指令

myModule.directive('namespaceDirectiveName', function factory(injectables) {

var directiveDefinitionObject = {

restrict: string,//指令的使用方式，包括标签(E)，属性(A)，类(C)，注释(M)

priority: number,//指令执行的优先级

template: string,//指令使用的模板，用HTML字符串的形式表示

templateUrl: string,//从指定的url地址加载模板

replace: bool,//是否用模板替换当前元素，若为false，则append在当前元素上

transclude: bool,//是否将当前元素的内容转移到模板中

scope: bool or object,//指定指令的作用域
/*object:{
name: "@", // name 值传递（字符串，单向绑定）
amount: "=", // amount 引用传递（双向绑定）
save: "&" // 保存操作
}*/

//定义与其他指令进行交互的接口函数
controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},

require: string,//指定需要依赖的其他指令

link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM，包括添加监听器等

compile: function compile(tElement, tAttrs, transclude){

return: {

pre: function preLink(scope, iElement, iAttrs, controller){...},

post: function postLink(scope, iElement, iAttrs, controller){...}

}

}//编程的方式修改DOM模板的副本，可以返回链接函数

};

return directiveDefinitionObject;

});

例如：
html

<!DOCTYPE html>
<html lang="zh-CN" data-ng-app="testapp">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="../../js/angular-1.4.0-rc.2/angular.js"></script>
<script src="../../js/test/controller.js"></script>
</head>
<body>
<div data-ng-controller="testController">
<span>姓名：</span>
<input type="text" data-ng-model="name">
<div>颜色：</div>
<span data-my-directive="chooseThis"></span>
<ul style="list-style:none;padding:15px;margin:0">
<li data-ng-repeat="color in colorList">
<input type="radio" name="colorname" value="{{color.name}}"
data-ng-model="colordata" >
{{color.name|colorEn:colordata:name}}
</li>
</ul>
<button type="button" data-ng-click="changeColor('绿色')">点我啊</button>
</div>
</body>
</html>

controller.js
angular.module("testapp",[])
.controller("testController",function($scope){
$scope.colorList=[
{
id:1,
name:"红色",
color:"red"
},
{
id:2,
name:"黑色",
color:"black"
},
{
id:3,
name:"绿色",
color:"green"
},{
id:4,
name:"黄色",
color:"yellow"
}
];
$scope.changeColor = function(name){
$scope.name = name;
$scope.colordata = name;
}
}).filter('colorEn',function(){
return function(colorName,radioValue,inputValue){
if(radioValue==undefined){
return colorName;
}
if(colorName == radioValue){
return colorName;
}else{
return null;
}
}
}).directive('myDirective', function factory() {
return {
restrict:'A',
template:"my frist directive",
repalce:true
}
});

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 指令写指令

相关文章推荐

新的分享

章节导航