angular.module('com.zzweb', [])
.directive('helloAngular', function() {
var directiveConfig = {
priority: 0,
template: '<div></div>',
templateUrl: 'index.html',
replace: false,
transclude: false,
scope: false,
restrict: 'A',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: function postLink(scope, iElement, iAttrs, controller) {}
}
},
link: function postLink(scope, iElement, iAttrs) {}
};
return directiveConfig;
});
-
restrict: (字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。
E(元素):
<directiveName></directiveName>
A(属性):
<div directiveName='expression'></div>
C(类):
<div class='directiveName'></div>
M(注释):
<--directive:directiveName expression-->
一般情况下E/A/C用得比较多.
-
priority (数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行;
-
terminal (布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)
-
template(字符串或者函数)可选参数,可以是:
(1)一段HTML文本: 比如
angular.module('com.zzweb', [])
.directive('helloAngular', function() {
return {
restrict: 'E',
template: '<h1>Hello Angular</h1>',
link: function(scope, element, attr) {}
}
});
(2)一个函数,可接受两个参数tElement和tAttrs其中tElement是指使用此指令的元素,而tAttrs则实例的属性,它是一个由元素上所有的属性组成的集合(对象)形如:
<hello-world2 title='directive'></hello-world2>
其中title就是tattrs上的属性,比如: 示例
angular.module('com.zzweb', [])
.directive('helloAngular', function() {
return {
restrict: 'E',
template: function(tElement, tAttrs) {
var _html = '';
_html += tAttrs.title;
return _html;
},
link: function(scope, element, attr) {}
}
});
- templateUrl(字符串或者函数),可选参数,可以是
(1)一个代表HTML文件路径的字符串
(2)一个函数,可接受两个参数tElement和tAttrs(大致同上)
注意:在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板 你可以再你的index页面加载好的,将下列代码作为你页面的一部分包含在里面。
这里的id属性就是被设置在templateUrl上用的,示例
<script type='text/ng-template' id='hello.html'>
<h1>Hello Angular</h1>
</script>
另一种办法是缓存读取,示例
app.run(['$templateCache', function($templateCache) {
$templateCache.put('hello.html', '<h1>Hello Angular</h1>')
}]);
-
replace replace为true时,hello-angular自定义标签就不存在了,注意,replace为true,必须要有一个root element包括,不然会报错
-
scope (1)默认值为false,表示继承父作用域;示例
(2)true,表示继承父作用域,同时创建自己的作用域(子作用域);示例
(3){},表示创建一个全新的隔离作用域 当为false时候,儿子继承父亲的值,改变父亲的值,儿子的值也随之变化,反之亦如此。(继承不隔离)
当为true时候,儿子继承父亲的值,改变父亲的值,儿子的值随之变化,但是改变儿子的值,父亲的值不变。(继承隔离)
当为{}时候,没有继承父亲的值,所以儿子的值为空,改变任何一方的值均不能影响另一方的值。(不继承隔离)
tip:当你想要创建一个可重用的组件时隔离作用域是一个很好的选择,通过隔离作用域我们确保指令是‘独立'的,并可以轻松地插入到任何HTML app中,并且这种做法防止了父作用域被污染;
隔离作用域可以通过绑定策略来访问父级作用域的属性
@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串,因为 dom 属性是字符串。
& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称,则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。