准备代码,会在实例中用到
var app = angular.module('app',[]);
angular指令定义大致如下
app.directive('directiveName',function() { return { // config } })
其中return返回的配置对象包含很多参数,如下一一说明。
1. restrict
值为字符串,可选参数,指明指令在DOM中以什么形式被声明
<!-- E (element) --> <directiveName></directiveName> <!-- A (attribute) --> <div directiveName="expression"></div> <!-- C (class) --> <div class="directiveName"></div> <!-- M(comment) --> <!--directive:directiveName expression-->
默认值为restrict: 'EA'
,表示可以在DOM里面可以用元素形式和属性形式被声明。一般来说,如果你想创建一个自己模板的组件时,则使用元素形式,但是仅仅是为已有元素添加功能的话,就使用属性名。
2. priority
数字,可选参数,致命指令的优先级,若在单个DOM元素上有多个指令,则优先级高的先执行。
当然,设置指令的优先级不太常用,但是比较特殊的例子是,内置指令ng-repeat的优先级为1000,而ng-init的优先级为 450。
3. terminal
布尔型,可选参数,可以被设置为true或者false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用优先级相同任然会执行。
4. template
字符串或者函数,可选参数。
可以是一段html文本
app.directive('hello',function() { return { template: '<div><h3>Hello,world!</h3></div>' } })
使用如下
<hello></hello>
渲染结果为
<hello> <div> <h3>Hello,world!</h3> </div> </hello>
也可以是一个函数,可接受两个参数Element与Attrs
其中Element是指使用此指令的元素,而Attrs则是实例的属性,它是由一个元素上所有属性组成的集合,形如
{ title: 'test',id: 'testDiv',class: 'demo',input: 'text',... }
下面让我们看看template是一个函数时的情况
app.directive('hello',function() { return { template: function(element,attrs) { return '<div>'+ attrs.title +'</div>' } }; });
<hello title="message"></hello>
渲染结果
<hello> <div>message</div> </hello>
5. replace
布尔型,默认值为false,设置为true的时候,表示可以用模板内容替换自定义的元素标签。
在template的例子中,我们发现渲染结果中包含有自定义的元素<hello></hello>
,很显然,这并不是我们想要的渲染结果,因此将replace设置为true之后,hello标签将会消失
app.directive('hello',function() { return { replace: true,template: function(element,attrs) { return '<div>'+ attrs.title +'</div>' } }; });
渲染结果如下,hello标签消失不见
<div>message</div>
6. templateUrl
字符串或者函数,可选参数
可以使一个代表html文件路径的字符串,也可以是一个函数,大致意思与template一样。
在本地开发时,需要运行一个服务器,不然使用templateUrl会报错
Cross origin request script(cors)
由于加载html模板是通过异步加载,若加载大量的模板会拖慢网站的速度,这里有一个技巧,就是先缓存模板,你可以先在你的index页面加载好,将下列代码作为你页面的一部分包含在内
<script type="text/ng-template" id="demo.html"> <div><!--这里是模板内容--></div> </script>
这里的id属性就是被设置在templateUrl上用的
另外一种方法缓存如下
app.run(function($templateCache) { $templateCache.put('template.html','<div>template</div>'); })
7. scope
布尔值或者对象,可选参数,默认值为false,表示继承父级作用域。
如果值为true,表示继承父作用域,并创建自己的作用域(子作用域)
如果为对象,{}
,则表示创建一个全新的隔离作用域。
首先我们需要来了解一下scope的继承机制。我们使用ng-controller这个指令来举例。我们都知道ng-controller可以从父作用域中继承并创建一个新的子作用域。如下:
<div ng-app="app" ng-init="aaa='parent'"> parentNode: {{aaa}} <div ng-controller="demoController"> childrenNode: {{aaa}} </div> </div>
angular.module('app',[]) .controller('demoController',function($scope) { $scope.aaa = "children"; })
parentNode: parent childrenNode: children
当时当我们并没有在demoController的作用域中给aaa赋值,也就是在上例中删除这一句$scope.aaa = "children";
,那么执行结果就为
parentNode: parent childrenNode: parent
注意:如果一个元素上有多个指令都使用了隔离作用域,那么只有其中一个可以生效,只有指令模板中的根元素才能获得一个新的作用域,这时候,scope就被设置为true了。
<div ng-app="app" ng-init="aaa='parent'"> parentNode: {{aaa}} <div ng-controller="demoController01"> childrenNode: {{aaa}} <div ng-controller="demoController02"> lastNode: {{aaa}} </div> </div> </div>
angular.module('app',[]) .controller('demoController01',function($scope) { $scope.aaa = "children"; }) .controller('demoController02',function($scope) { $scope.aaa = "last" })
接下来,我们通过一个简单明了的例子来说明scope取值的不同差别
<div ng-app="app" ng-controller="mainController"> parent: {{ name }} <br /> <input type="text" ng-model="name" /> <div my-directive></div> </div>
angular.module('app',[]) .controller('mainController',function($scope) { $scope.name = "Jake"; }) .directive('myDirective',function() { return { restrict: 'EA',scope: false,replace: true,template: '' + '<div>' + 'childNode: {{ name }} ' + '<br />' + '<input type="text" ng-model="name">' + '</div>' } })
点击上面的实例地址,我们可以依次改变scope的值为false,true,{},结果发现
false:儿子继承父亲的值,改变父亲的值,儿子的值也随着改变,反之亦然,这就是继承且不隔离
true:儿子继承父亲的值,改变父亲的值,儿子的值也随着改变,但是改变儿子的值,父亲的值并没有改变,这就是继承但是隔离
{}:没有继承父亲的值,所以儿子的值为空,改变任何一方的值都不会影响另一方,这就是不继承且隔离
当想要创建一个可重用的组件时,隔离作用域是一个很好的选择,通过隔离作用域,我们可以确保指令是独立的,并且可以轻松的插入到任何HTML APP中,并且这种做法防止了父作用域被污染。
隔离作用域可以通过绑定策略来访问父作用域的属性
我们来看一个例子
<div ng-app="app" ng-controller="mainController"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world></hello-world> </div>
angular.module('app',function($scope) { }) .directive('helloWorld',template: '<p style="background-color:{{color}}">Hello world!</p>' } })
运行上面的代码,我们在input中输入颜色值,比如red,那么hello world一行的背景就会变成红色。动手试试!
但是,当我们将scope的值设置为{}时,再次运行代码就发现页面并不能成功的完整显示了.这是因为{}让helloWorld指令产生了隔离作用域,没办法从父级作用域中继承到color的值了。
所以在template中的{{color}}变成了依赖于自己的作用域,而不是依赖于父级作用域。因此我们需要一些办法来让隔离作用域能够读取父级作用域的属性,这个方法就是绑定策略。
下面我们来探索设置这种绑定策略的几种方法
方法一 使用@来进行单向文本(字符串)绑定
<div ng-app="app" ng-controller="mainController"> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color-attr="{{color}}"></hello-world> </div>
angular.module('app',scope: { color: '@colorAttr' },template: '<p style="background-color:{{color}}">Hello world!</p>' } })
这种办法只能单向,通过在运行的指令DOM上设置color-attr
属性,并且采用{{}}绑定某个模型值。当然,我们也可以直接在这里绑定字符串的颜色值,如color-attr="red"
因此当表达式的值发生变化时,属性color-attr的值也会发生变化,通过单向绑定该值,就可以改变隔离作用域中的属性color.
如果绑定的隔离作用域属性名与元素的属性名相同,则可以采用缺省写法
// html <hello-world color="{{color}}"></hello-world> // js app.directive('helloWorld',function() { return { scope: { color: '@' },... } })
方法二、使用'='进行双向绑定
<div ng-app="app" ng-controller="mainController"> <input type="text" ng-model="color" placeholder="Enter a color"/> <br /> {{ color }} <!-- 这里要注意写法与@绑定的不同 --> <hello-world color="color"></hello-world> </div>
angular.module('app',function($scope) { $scope.color = 'red'; }) .directive('helloWorld',scope: { color: '=' },template: '<div><p style="background-color:{{color}}">' + 'Hello world!' + '</p>' + '<input type="text" ng-model="color"></div>' } })
此处也采用了类似的缺省写法。
这里需要注意的是,我们要直接在指令元素设置属性时,是直接将实际的作用域模型复制给该属性
这样一个双向绑定被建立了,改变任何一个input值都会改变另外一个值。
方法三、使用'&'调用父作用域中的函数
<div ng-app="app" ng-controller="mainController"> <input type="text" ng-model="name" placeholder="Enter name"/> <br /> {{ name }} <hello-world say="say()" name="{{name}}"></hello-world> </div>
angular.module('app',function($scope) { $scope.name = "yangbo"; $scope.say = function() { alert('hello!'); } }) .directive('helloWorld',scope: { name: '@',say: '&' },template: '<button type="button" ng-bind="name" ng-init="say()"></button>' } })
同样采用了缺省写法,运行之后,弹出窗口!
8. transclude
布尔值或者字符element
,默认值为false
这个配置选项可以让我们提取包含在指令那个元素里面的内容,再将它放置在指令模板的特定位置。当我们开启transclude之后,我们就可以使用ng-transclude来指明应该在什么地方放置transclude的内容
<div ng-app="app" ng-controller="mainController"> <div class="a"> <p>china</p> <hello-world> {{name}} </hello-world> </div> </div>
angular.module('app',function($scope) { $scope.name = "yangbo5207"; }) .directive('helloWorld',scope: {},transclude: true,template: '<div class="b"><div ng-transclude>你看不见我</div></div>' } })
china yangbo5207
我们查看渲染出来的html,结果为
<div ng-app="app" ng-controller="mainController" class="ng-scope"> <div class="a"> <p>china</p> <div class="b ng-isolate-scope"> <div ng-transclude=""> <span class="ng-binding ng-scope">yangbo5207</span> </div> </div> </div> </div>
另外当开启transclude时,会创建一个新的transclude空间,并且继承父作用域(也就是scope设置的隔离作用域)
从上面例子我们知道,当transclude的值被设置为true时,嵌入的内容为{{name}},但是如果将它的值设置为element
呢,我们可以在上例的基础上进行一个简单的修改,发现,嵌入内容为整个元素
<hello-world>{{name}}</hello-world>
查看渲染结果
<div ng-app="app" ng-controller="mainController" class="ng-scope"> <div class="a"> <p>china</p> <div class="b ng-isolate-scope"> <div ng-transclude=""> <hello-world class="ng-binding ng-scope"> yangbo5207 </hello-world> </div> </div> </div> </div>
注意:在一个指令的模板中,只能声明一次ng-transclude
那么问题来了,如果我们想要把嵌入内容多次放入我们的模板中怎么办?
可以使用$transclude,后面会讲到!也可以使用complie函数中,里面的transcludeFn参数,后面会讲到!或者使用link连接函数
9. controller
可以是一个字符串或者函数。
若为字符串,则将字符串当做控制器的名字,来查找注册在应用中的控制器的构造函数
angular.module('app',[]) .directive('myDirective',// 会查找模块中其他被名为targetController的控制器 controller: 'targetController' } }) .controller('targetController',function($scope,$element,$attrs,$transclude) { // 控制器逻辑放在这里 })
当然,也可以直接在指令内部定义为匿名函数,同样可以注入任何服务
angular.module('app',controller: function($scope,$transclude) { // 控制器逻辑 } } })
另外还有一些特殊的服务可以注入,
$scope 与指令元素相关联的作用域
$element 当前指令对应的元素
$attrs 当前元素的属性组成的对象
$transclude 嵌入链接函数,实际被执行用来克隆元素和操作DOM中的函数(除非是用来定义一些可复用的行为,否则一般不推荐在这使用)
指令的控制器和link函数(后面会讲到)可以进行互换。区别在于,控制器主要用来提供可在指令间复用的行为,可对外提供与外部交互的接口,但是link链接只能在当前指令内部中定义行为,且无法在指令间复用。
<div ng-app="app"> <div test-directive="dateType" url="http://www.tigerbrokers.com">外面的世界很精彩。</div> </div>
angular.module('app',[]) .directive('testDirective',function() { return { transclude: true,$transclude,$log) { $transclude(function(clone) { var a = angular.element('<a>'); a.attr('href',$attrs.url); a.text(clone.text()); $element.append(a); }); } } })
$transclude 可以接受两个参数,第一个是$scope,第二个是才有参数clone的回调函数。
而这个clone实际上就是嵌入的内容。可以在根据它做很多DOM操作。
它还有最简单的用法
angular.module('app',$log) { // 这里的$transclude就是嵌入的内容 var a = $transclude(); $element.append(a); } } })
但是我们要注意,使用$transclude会生成一个新的作用域。默认情况下,如果我们简单使用$transclude(),那么其作用域就是$transclude 生成的作用域。但是如果我们使用$transclude($scope,function(clone) {}),那么作用域就是directive的作用域了。
当然问题又来了,如果我们想使用父级作用域呢?
$scope.$parent
<div ng-app="app" ng-controller="parentController"> <div ng-controller="sonController"> <test-directive url="http://www.tigerbrokers.com">炒美股,上老虎2</test-directive> </div> </div>
angular.module('app',[]) .controller('parentController',function($scope) { $scope.title = "PARENT TIGER"; }) .controller('sonController',function($scope) { $scope.title = "CHILDREN TIGER"; }) .directive('testDirective',$log) { var a = $transclude(); $element.append(a); $log.info($scope.title); $log.info($scope.$parent.title); } } })
10. controllerAs
angualr 1.2之后,就已经开始支持controllerAs的语法,这样我们就可以不用将属性和方法挂载到$scope上,而是this上。
<div ng-app="app" ng-controller="demoController as demo">{{ demo.name }}</div>
angular.module('app',function() { this.name = "Jake"; })
我们可以从实例中看出,这里的this就是指的as后面的那个别名。然后我们在表达式中就可以使用这个别名
我们知道,在directive中的controller,主要职能是对外提供交互接口,而结合require与link,因此我们常常会利用这样的语法而非上面例子中的$scope
app.directive('testDirective',function() { return { controller: function() { this.name = "Jake"; } } })
11. require
字符串或者数组,字符串代表另一个指令的名字,它将作为link函数的第四个参数。具体用法我们可以举例子来说明。
假设现在我们要编写两个指令,两个指令的link函数中存在许多重合的方法,这时候我们就可以将这些重复的方法写在第三个指令的controller中,然后在这两个指令中,使用require将第三个指令引入进来,然后我们就可以通过link连接函数的第四个参数引用这些重合的方法了
指令之间常常通过这种方式进行交互
<div ng-app="expanderModule" ng-controller="SomeController" class="wrap"> <accordion> <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'> {{expander.text}} </expander> </accordion> </div>
var expModule=angular.module('expanderModule',[]) expModule.directive('accordion',function() { return { restrict : 'EA',replace : true,transclude : true,template : '<div ng-transclude></div>',controller : function() { var expanders = []; this.gotOpened = function(selectedExpander) { angular.forEach(expanders,function(expander) { if (selectedExpander != expander) { expander.showMe = false; } }); } this.addExpander = function(expander) { expanders.push(expander); } } } }); expModule.directive('expander',require : '^?accordion',scope : { title : '=expanderTitle' },template : '<div>' + '<div class="title" ng-click="toggle()">{{title}}</div>' + '<div class="body" ng-show="showMe" ng-transclude></div>' + '</div>',link : function(scope,element,attrs,accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); } } } }); expModule.controller("SomeController",function($scope) { $scope.expanders = [{ title : 'Click me to expand',text : 'Hi there folks,I am the content that was hidden but is now shown.' },{ title : 'Click this',text : 'I am even better text than you have seen prevIoUsly' },{ title : 'Test',text : 'test' }]; });
实例说明,controller是用来与不同指令之间通信的。
另外我们可以在require的参数值加上下面的某个前缀,这回改变查找控制器的行为。
没有前缀 指令会在自身提供的控制器中进行查找,如果找不到任何控制器,则会抛出一个error
^ 如果在当前的指令中没有找到所需的控制器,则会查找父元素的控制器
?^ 如果在当前和父元素中都没有找到控制器,则会将null传给link
12. angular指令编译过程
首先加载angular库,查找ng-app指令,从而找到应用的边界,根据ng-app划定的作用域来调用$compile服务进行编译。
angular会遍历整个html文档,并根据js中指令的定义来处理在页面上声明的各个指令,按照指令的优先级排列,根据指令中的配置参数(template,replace,transclude等)转换DOM,然后就开始按照顺序执行各指令的compile函数(如果指令上有定义compile函数)对模板自身进行转换。
此处的compile函数值什么指令中配置的,与上面说的$compile服务不一样
每个compile函数执行完后会返回一个link函数,所有的link函数会合成一个大的link函数,然后这个大的link函数就会被执行, 主要做数据绑定,通过 DOM上注册监听器来动态修改scope中的数据,或者是使用$watchs监听scope中变量来修改DOM,从而建立双向绑定等等。
若我们的指令中没有配置compile函数,那我们配置的link函数就会运行,她做的事情大致跟上面compile返回之后所有的link合成的大link函数差不多。
所以,在指令中compile与link选项是互斥的,如果同时设置了这两项,那么就会把compile所返回的函数当做是链接函数,而link选项本身会被忽略。
13. compile编译函数与link链接函数
cmopile选项可以返回一个对象或者函数,在这里我们可以在指令和实时数据被放到DOM之前进行DOM操作,比如我们可以在这里进行添加或者删除节点的DOM操作。
所以编译函数是负责对模板的DOM进行转换,并且仅仅只会运行一次
//compile函数的语法 compile:function compile(tElement,tAttrs,transclude){ return{ pre:function preLink(scope,iElement,iAttrs,controller){},post:function postLink(scope,controller){} } }
对于我们编写的大部分指令来说,并不需要对模板进行转换,所以大部分情况只需要编写link函数就行。
preLink函数会在编译阶段之后,指令链接到子元素之前执行,类似的,postLink会在指令链接到子元素之后执行。这意味着,为了不破坏绑定过程,如果你需要修改DOM结构,你应该在postLink函数中来做这件事情。
//link链接函数 link:function postLink(scope,iAttrs){}
若指令中定义有require选项,则link函数会有第四个参数,代表控制器或者所依赖的指令的控制器(上面require选项例子已有例子)
内容都真够多的,终于整理完了,今天写了两篇文章,感觉好累!如果大家觉得文章对你有帮助,求赞求收藏。
许多内容都是从不同的网站上整理而来,每一个实例都是自己运行过后保存在codepen上,大家可以结合codepen的例子结合理解文章内容,本文属于收集文,非原创,但绝对干货!值!得!一!赞!与收藏。