自定义的指令常用的属性如下:
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("test",[]);
app. directive (" hello ",function(){
return {
restrict: ' ACEM ',
template :function(){
return " <button ng-click='fn()'>click me</button> ";
},
terminal :true,
replace :true,
scope :true,
link :function( scope,elements,attrs ){
elements.bind('click', function () {
elements.css('background-color','blue');
})
},
transclude :true,
compile :function(){
return function( scope,elements,attrs ){
elements.bind('click', function () {
elements.css('background-color','red');
scope.$apply(function () {
scope.color='pink';
})
})
}
},
controller: function ($scope, $compile, $http) {
$scope.fn= function () {
alert('hello');
};
}
}
});
</script>
</head>
<body>
<hello></hello>
</body>
</html>
{
1.restrict:ACEM (字符串)可选参数,指明指令在DOM里面以什么形式被声明;
取值有:E(元素),A(属性),C(类),M(注释),
2.template:function(){return string} 字符串或者函数)可选参数
3.terminal:boolean (布尔型),可选参数,可以被设置为true或false,
若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)
4.replace:boolean 布尔值),默认值为false,设置为true时候,replace为true时,hello这个标签不在 了,反之,则存在
5.scope:boolean
(1)默认值false。表示继承父作用域;
(2)true。表示继承父作用域,并创建自己的作用域(子作用域);
(3){}。表示创建一个全新的隔离作用域;
6.link:function(scope,elements,attrs)
7.transclude:boolean
8.compile:function(){return function(scope,elements,attrs)}
9.controller:function ($scope, $compile, $http) 可以是一个字符串或者函数。
另外还有一些特殊的服务(参数)可以注入
(1)$scope,与指令元素相关联的作用域
(2)$element,当前指令对应的 元素
(3)$attrs,由当前元素的属性组成的对象
(4)$transclude,嵌入链接函数,实际被执行用来克隆元素和操作DOM的函数
10.templateUrl:HTML模板
11.priority (数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行
12.templateUrl(字符串或者函数),可选参数 ,可以是
代表HTML文件路径的字符串或一个函数,可接受两个参数tElement和tAttrs
13.require 字符串代表另一个指令的名字,它将会作为link函数的第四个参数
}
1、ng-app指令:
告诉 AngularJS 应用当前这个元素是根元素。所有AngularJS应用都必须要要一个根元素。HTML文档中只允许有一个ng-app指令,如果有多个 ng-app 指令,则只有第一个会被使用,它的值是指定载应用模块的名称。
2、ng-controller指令:
用于为你的应用添加控制器。在控制器中,你可以编写代码,制作函数和变量,并使用scope对象来访问。
3、ng-model指令:
绑定了HTML表单元素到scope变量中。如果scope中不存在变量, 将会创建它。一般是用在input表单中改变value值用做双向数据绑定。
4、ng-bind指令:
告诉AngularJS使用给定的变量或表达式的值来替换HTML元素的内容。如果给定的变量或表达式修改了,指定替换的HTML元素也会修改。
以上4个指令的初次使用场景: AngularJs简介、指令、表达式及其作用。
5、ng-click指令:
告诉AngularJS,HTML元素被点击后需要执行的操作。
6、ng-cloak指令:
用于在AngularJS应用在加载时防止AngularJS代码未加载完而出现的问题。
AngularJS应用在加载时,文档可能会由于AngularJS代码未加载完而出现显示AngularJS代码,进而会有闪烁的效果,ng-cloak指令是为了防止该问题的发生。
实例:AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案。
7、ng-value指令:
用于设置input 或select元素的 value 属性。
8、ng-show指令:
在表达式为true时显示指定的HTML元素,否则隐藏指定的HTML元素。
9、ng-true-value和ng-false-value指令:
可以自定义checkbox被选中或取消选中之后的value值,ng-true-value表示选中之后的value值,ng-false-value表示取消选中之后的value值。
10、ng-options指令:
循环读取scope对象中的json数据,将其逐条返回到select中的option。
实例:AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令
11、ng-selected指令:
用于设置 <select> 列表中的 <option> 元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。
1
<!-- ng-selected 如果为
true
,则option被选中 -->
2
<
select
>
3
<option>请选择</option>
4
<option ng-value=
"user.sex"
ng-selected=
"user.sex==1"
>男</option>
5
<option ng-value=
"user.sex"
ng-selected=
"user.sex==2"
>女</option>
6
</
select
>
7
<input
type
=
"radio"
name=
"sex"
ng-model=
"user.sex"
ng-value=
"1"
/>男
8
<input
type
=
"radio"
name=
"sex"
ng-model=
"user.sex"
ng-value=
"2"
/>女
1
var
m = angular.module(
'app'
, []);
2
m.controller(
'ctrl'
, [
'$scope'
,
function
($scope){
3
$scope.user = {
'sex'
:1};
4
}]);
12、ng-disabled指令:
设置表单输入字段的 disabled 属性(input, select, 或 textarea)。如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
1
<!-- ng-disabled 如果为
true
,则不可编辑且置灰 -->
2
<input
type
=
"checkbox"
ng-model=
"copyright"
/>
3
<input
type
=
"submit"
ng-disabled=
"!copyright"
/>
13、ng-readonly指令:
用于设置表单域(input 或 textarea) 的 readonly 属性。如果 ng-readonly 属性的表达式返回 true 则表单域为只读。
1
<!-- ng-
readonly
如果为
true
,则是只读,不可编辑 -->
2
<input
type
=
"text"
ng-
readonly
=
"user.sex"
/>
3
<input
type
=
"text"
ng-disabled=
"user.sex"
/>
14、ng-model-options指令:
绑定了 HTML 表单元素到 scope 变量中,你可以指定绑定数据触发的时间,或者指定等待多少毫秒。
实例:AngularJs使用ng-model-options设置数据同步时机提高网站性能
15、ng-checked指令:
用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中。
实例:AngularJs使用ng-checked一步实现全选或取消功能
16、ng-class指令:、
用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串,对象,或一个数组。
如果是字符串,多个类名使用空格分隔;
如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加;
如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。
实例:AngularJs通过ng-class动态改变样式类实例操作
17、ng-style指令:
为 HTML 元素添加 style 属性。ng-style 属性值必须是对象,表达式返回的也是对象。对象由 CSS 属性和值注册,即 key=>value 对。
18、事件指令总结: