这篇文章只是介绍,加深理解,这里有篇例子的博客写的不错,感兴趣的可以看看
作用:自定义html中的组件(说白了就是各个页面片互相粘来粘去)
看下代码:
var directives = angular.module('demo.directives', []);
directives.directive('customDirective', function() {
return {
restrict: 'ECMA',
template: '<nav></nav>',
templateUrl: 'directive.html',
replace: false,
transclude: false,
scope: false,
controller:directiveController(fn),
link: function(scope, element, attrs) {
}
};
})
restrict:
指定了directive的使用形式,共有四种:
template和templateUrl:
用于指定directive对应的模板,前者直接使用字符串定义模板,而后者则通过url链接外部模板文件。(2选1)
replace:
指定是否使用模板替换directive作用的DOM元素。
transclude:
用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下
scope:
用于指定当前directive所对应的scope,不同的取值之间的影响非常大。
- false:此时directive与父元素共享scope
- true:此时directive有自己的scope,该scope继承父元素所对应的scope
- isolate:directive有自己的scope,该scope不会继承自父元素对应的scope,但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法,因为这样就对父元素进行了限制,影响了directive的使用范围。
- 如果想在父子元素之间共享数据,可以明确指定那些元素需要父子之间共享。方法共有三种:
使用@将父级scope中的属性绑定到本地scope中,单向绑定,这个值总是字符串,在template中需要使用{{}}
使用=同上,只不过这里是双向绑定,在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式
controller
directive对应的controller,通常用于directive之间的通信。
link:
此函数的主要作用就是对DOM和scope做数据绑定。在这个函数中,可以访问scope了。
还有些不常用的参数:
terminal
require
priority
compile
楼主就不在这里介绍了,需要的请自行百度。