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
}
});
效果图: