1 | angular.module('app', []).directive('directiveName', function() { |
restrict
类型:(字符串)可选参数
取值有:E
(元素),A
(属性),C
(类),M
(注释),其中默认值为A
;
E
(元素):<directiveName></directiveName>
A
(属性):<div directiveName='expression'></div>
C
(类):<div class='directiveName'></div>
M
(注释):<-- directive:directiveName expression-->
template
类型:(字符串或者函数)可选参数
1 | var myModule = angular.module('MyModule', []) |
HTML 代码为:<hello></hello>
1 | angular.module('app', []).directive('directitle', function() { |
HTML 代码为:<directitle title="biaoti"></directitle>
templateUrl
类型:(字符串或者函数),可选参数
- 一个代表 HTML 文件路径的字符串
- 一个函数,可接受两个参数 tElement 和 tAttrs(大致同上)
1 | var myModule = angular.module("MyModule", []); |
注意:在本地开发时候,需要运行一个服务器,不然使用 templateUrl 会报错
templateCache
由于加载 html 模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板。
1 | var myModule = angular.module('MyModule', []) |
replace
类型:(布尔值),默认值为 false
如果设置 repace:true 的话,就会隐藏掉对于指令命名的 html 标签
类似
1 | var myModule = angular.module('MyModule', []) |
HTML 代码为:<hello></hello>
渲染之后的代码:<div><h3>hello world</h3></div>
对比下没有开启replace
时候的渲染出来的 HTML。发现<hello></hello>
不见了。
transclude
类型:(布尔值或者字符element
),默认值为false
;
如果设置了transclude
为true
的话,就会把原本指令标签中用于写的东西放置到ng-transclude
中去。
1 | var myModule = angular.module('MyModule', []) |
HTML 代码为:
1 | <hello> <div>这里是指令内部的内容。</div> </hello> |
注意:在一个指令的模板 template 上只能申明一个 ng-transclude。
如果我们想把嵌入部分多次放入我们的模板中要怎么办?则可以在link
或者controller
里面添加一个参数$transclude
。
1 | link:function($scope,$element,$attrs,controller,$transclude){ |
1 | var app = angular.module('app', []) |
HTML 代码为:
1 | <div my-link value=" target="_blank">百度</div> |
transclude:’element’ 和 transclude:true 的区别
有时候我们要嵌入指令元素本身,而不仅仅是他的内容,这种情况下,我们需要使用transclude:"element"
,和transclude:true
不同,他讲标记了ng-transclude
指令的元素一起包含到了指令模板中,使用transclusion
, 你的link
函数会获取到一个叫transclude
的链接函数,这个函数绑定了正确的指令scope
,并且传入了另外一个拥有被嵌入 dom 元素拷贝的函数,你可以在这个transclude
函数中执行比如修改元素拷贝或者将他添加到 dom 上等操。
scope
类型:可选参数,(布尔值或者对象)
- 默认值 false,表示继承父作用域(儿子继承父亲的值,改变父亲的值,儿子的值也随之变化,反之亦如此);
- true,表示继承父作用域,并创建自己的作用域(子作用域)(儿子继承父亲的值,改变父亲的值,儿子的值随之变化,但是改变儿子的值,父亲的值不变);
- {},表示创建一个全新的隔离作用域(没有继承父亲的值,所以儿子的值为空,改变任何一方的值均不能影响另一方的值);
为了让隔离作用域能读取父作用域的属性,产生了绑定策略:
使用@(@attr)来进行单向文本(字符串)绑定
1 | var app = angular.module('myApp', []) |
HTML 代码为:<hello-world color-attr=''></hello-world>
这种办法只能单向,通过在运行的指令的那个 html 标签上设置color-attr
属性,并且采用双层花括号绑定某个模型值。
提示:如果绑定的隔离作用域属性名与元素的属性名相同,则可以采取缺省写法。
HTML 代码为:
1 | <hello-world color="{{color}}"/></hello-world> |
js 定义指令的片段:
1 | app.directive('helloWorld',function(){ |
使用=(=attr)进行双向绑定
1 | var app = angular.module('myApp', []) |
HTML 代码为:
1 | <input type="text" ng-model="color" placeholder="Enter a color" /> {{color}} |
使用&来调用父作用域中的函数
1 | var myModule = angular.module('MyModule', []) |
HTML 代码为:
1 | <greeting greet="sayHello(name)"></greeting> |
备注:
- & 父级作用域: 传递进来的参数必须是父级的函数方法, 然后在指令中,通过 test() 获取到 传递进来的函数,这个还不够,还必须再执行一次 test()() 才是真正的执行这个方法。
- @ 本地作用域: 只能传递字符串进来,对于方法或者对象是传递不进来的。
- = 双向属性: 可以传递对象进来,也可以是字符串,但是不能传递方法。 同时可以在指令中修改这个对象,父级里面的这个对象也会跟着修改的。