directive 指令
参考文章 :
http://www.zouyesheng.com/angular.html#toc20 18. 自定义指令directive
http://blog.jobbole.com/62249/
http://blog.jobbole.com/62999/
https://docs.angularjs.org/api/ng/service/$compile
https://docs.angularjs.org/guide/directive
http://www.cnblogs.com/lvdabao/p/3398044.html
http://loveky.github.io/2014/04/01/angularjs-directivecompilelink/
directive 是angular 用于扩展html标签的方案.
它使得我们可以在模板上写入自定义的元素或标签，通过angular的扫描执行一些改装事件绑定等等。
angular 也提供了很多的指令比如 ng-click,ng-repeat 等等
首先大致说一下整个执行过程.
1.angular 调用$compile来偏离我们的html文档, 把dom和指令关联在一起打包起来
2.对每个element的指令排序
3.检查指令如果有template就replace等等,templateUrl 会发出异步请求(回来的时候应该其它dom已经做完了)
4.循环调用指令中的 compile，所以我们在compile可以调用$element修改模板 (这个时候模板还没有被插入到document中)
5.把每个compile返回的link函数收集起来
6.link函数可以分为 pre 和 post (pre 和 post 最要区别在执行持续， pre 是从parent to child , post 则是 child to parent) 参考http://jsfiddle.net/loveky/K93SE/light/
7.循环调用 pre link , 并把scope传入, 这时我们的参数$attrs 中的值是还没解析的表达式 ,
8.循环执行 post link , 把scope传入，这时的$attrs 已经放入了$scope的值, 我们可以做一些绑定监听等
9.调用$digest渲染.
最终就是美美的DOM啦 .
小总结 : $compile -> 运行全部节点指令的compile , 一个一个节点运行 pre link, 一直到子层完 , 调用post link 一直到parent , 去下一个兄弟节点，再次运行pre link... (ng-controller 是最优先的pre link)
我们现在一步一步来看具体实现
angular.module("app", [], angular.noop).
directive("myelem1", function () {
return {
restrict : "E",
link: function (scope, element, attrs, controllers) {
}
}
});
这个是创建方法
retrun 一个对象，里面包含了指令的config等等 .
具体属性有 :
- name
- priority
- terminal
- scope
- restrict
- template
- templateUrl
- replace
- transclude
- compile
- link
- controller
- require
我们逐一介绍
restrict
用于表示我们的指令类型，支持4中pattern , 很好记叫ECMA
E = elemet <myelem></myelem> 元素
C = class <div class="myelem"> class 中的属性，基本不用
M = 注释 <!-- directive: my-dir exp --> 基本不用
A = attr <div myelem="??"> 标签
restrict = "ECMA" 可以同时放多个
template
template : "<div>123</div>"; 写模板，这里的模板和一般写的版本相同，没有任何限制
默认情况下，模板将被append进当前的指令元素
templateUrl
也可以使用模板地址代替string模板, 如果一个指令使用template的话，它会被异步编程，请求template时，angular会先解析其它element指令先
replace
replace : true 表示把模板直接替换掉当前的指令元素。这里有个限定，元素必须是一对一的对换，简单说就是模板必须被一层div包到完只能有子层不能有兄弟。
priority
priority : 100 放一个number , 在一个元素上设置指令的解析次序。如果2个指令相同，那么angular不会区分那个先执行。(越小的代表优先，0是default)
需要特别注意，当我们在一个element上放置了多个指令，会有一下的限制
- Multiple directives requesting
isolated scope. //要隔离的scope - Multiple directives publishing a controller under the same name. 不懂
- Multiple directives declared with the
transclusionoption. //不懂 - Multiple directives attempting to define a
templateortemplateURL. //只能有一个指令用于带有模板
scope
scope : false | true | {@attr: '引用节点属性', =attr: '把节点属性值引用成scope属性值', &attr: '把节点属性值包装成函数'}
false 表示直接使用指令位于的controller的$scope
true 表示new一个$scope继承controller $scope
{..} 表示new一个$scope不继承，但是可以通过 @=& 来和元素上的标签做桥梁，在标签上就可以和controller $scope的属性做一些连接了
这里特别说一下，如果是用继承，那么指令本身的scope是新的，如果用隔离scope，指令本身的scope不是新的，而指令模板的scope才是新的 (大家可以自己玩玩看^^)
那么来看看 @=&的区别和用法。
场景是一个 ctrl 和 一个 dir
如果我们想做一个单向绑定, 即 ctrl 传一个值给 dir, 之后只有 ctrl一方的值能同步到 dir. 我们使用 "@" (即使值是个object,它依然是单向绑定，angular传入的不是引用)
如果我们想做双向绑定，即 dir 的值也能同步到 ctrl . 我们使用 "="
如果我们想传的是方法，我们使用 "&"
注意 ： “&” 也是单向绑定的。如果是要穿个动态方法，我们可以使用 "=" 把方法当值来传也是可以的。
另外对于依赖跟踪属性，我们也可以把它们当方法来看待，使用 "&"
新手 : 不要以为能用"@"的地方就能用"="，这是不对的概念，会遇到很多坑的。
下面我们指出了一些小区别，要留意
<mydir single-name="{{singleName}}" //@ 要使用 {{ 属性名 }} , 如果没有{{}}表示它是个值，之后不会有任何同步绑定。 double-name="doubleName" //= 只写属性名就好 click="click()"> "&" 要使用 属性名() </mydir> scope: { singleName: "@", doubleName: "=", click: "&" },
//在link函数中
log(attr.singleName); //使用 @ 这里是"keatkaet1" <-获取到值 , 使用 = 这里是"doubleName" <-只是属性名 , 使用 & 这里是 "click()" <- 属性名()
terminal
terminal : true 表示在一个元素上priority大于这个指令的指令将不会被处理了。
transclude
使用 ng-transclude 要特别注意， 它会自动帮我们创建一个scope,并继承"跨parent scope" .
在做坎套指令时， 比如 ctrlA内有b指令内有c指令 , 在b模板中我们ng-transclude了c , 那么c的$scope会自动被创建新的并继承A, 而不是B哦！B-C是sibling $scope 的关系 .
这样的好处是如果指令B是一个隔离scope,那么我们的C指令还是有办法可以访问到A$scope内容。
这种情况只有ng-transclude可以做到，那么如果我们不希望这样，而是要C继承B的话，那么我们可以自己写一个my-transclude.在link中调用transludeFn来实现即可
transclude : true | "element"
先说true的情况
<myelem2> <div>123</div> <%--这一段，指令元素的子层会被cut进去模板中--%> </myelem2> directive("myelem2", function () { return { restrict: "E", link: function (scope, element, attrs, controllers) { alert("myelem2"); }, transclude: true, template: '<div ng-transclude></div>', //模板中其中一个元素放入指令 ng-transclude,外边的子层就会被cut进来这里了 replace : true } })
"element" 的意思是把整个指令元素都cut进来，所以如果你的设置是replace= false 的话，就不会有东西出现了。
link: function (scope, iElement, iAttrs, controller, transcludeFn) { //如果是"element"，可以调用transcludeFn
//可以在这里for loop 调用transcludeFn ，然它clone多多出来 transcludeFn(scope, function (clone) { //传入scope,和方法 clone.css('background-color', 'yellow'); //这里的clone是angular帮我们clone出来的阶段 iElement.after(clone); }) alert("myelem2"); },
参考ng-repeat,它也是用link 而不是compile 来做循环clone. 所以也搞不清楚compile适合什么场景使用.
require 和 controller
这2个关系密切，就一起介绍吧。
很多时候我们会用多层指令来做一个插件。
比如 :
<myelem1>
<myelem2>
<myelem3></myelem3>
</myelem2>
</myelem1>
那么它么之间要互相沟通的话可以使用 require 和 controller 来完成
directive("myelem1", function () {
return {
restrict: "E",
link: function (scope, iElement, iAttrs, controller, transcludeFn) {
},
template: '<div ng-transclude></div>',
replace: true,
transclude: true,
scope: true,
controller: function ($scope) {
this.name = function () { //对外提供方法
alert("name");
}
},
//name: "myelem1Ctrl" //如果没有取名，那么会自动用指令名来代替
}
}).
在一个指令写上controller 和一个 name (name 不写的话会自动用指令的名字替代)
那么这个指令就可以被它子层和同层(同层包括next prev elem指令)的指令require了
这里的controller 是用依赖注入的，和 link complie 不同哦
一般我们会把这个controller 也当成service 或者一个对外开放的接口来看待。
其它指令通过 controller.someFn 来操作我们的scope
directive("myelem3", function () {
return {
restrict: "E",
link: function (scope, iElement, iAttrs, controllers, transcludeFn) {
controllers[0].name();
controllers[1].name();
},
template: '<div>myelem3</div>',
replace: true,
require: ["?^myelem1","?^myelem2"], //它可以找多层，但是找不到普通的controller,只能找指令的controller
}
})
require 可以是一个array , ?代表如果找不到将返回undefined, ^是像上层(多层)寻找controller,默认是只在同层element上寻找其它指令
require 只能访问指令的controller,在 link 函数中我们就是用到 controllers了
还有个另类例子 :
controller("ctrl", ["$scope", function ($scope) {
$scope.name = "keatkeat";
this.xyz = "ggc";
}]).
directive("dir1", [function () {
return {
restrict: "E",
controller: "ctrl",
name: "ctrl123",
link: function (scope) {
console.log(scope.name);
}
}
}]);
指令的ctrl写入string , 它会去寻找 controller，通过name也可以重命名 ， 不过一般上我们不这样做，容易混淆。
note : 指令写controller不会自动加scope,只有写scope:true|{} 才会.
compile 和 link
我对compile 和 link 只是一知半解
angular 会先执行 compile 等全部指令编辑完了才执行link ，执行compile的时候只操作DOM 不涉及 scope , compile 函数是访问不到scope的。
function compile(tElement, tAttrs, transclude) { ... } function link(scope, iElement, iAttrs, controller, transcludeFn) { ... }
这2个函数的参数都不是依赖注入的.
transclude 是一个方法，可以实现clone上面介绍过了
一般上 compile 必须返回一个link 函数 或者一个带有 pre , post 方法的对象
当一个节点有多个指令时 angular 会完成所有的 prelink 之后才执行 post link . 这允许我们在最后关头在多个指令间执行一些操作 pre link 是可以调用scope 的.
小总结 :
指令我觉得有2个重点。
一是template的结构，重要的是要理解 $compile 的过程还有 transclude的用法 ，ng-repeat 是比较复杂的例子，可以参考.
二是指令间的通讯 ,要理解 scope,require,controller. 在做表单控件时经常会和ngModel controller || ngform controller 打交道.
外传 :
当我们使用transclude = true 时，在我们的 compile : function(elem,attrs,link) 第3个参数是这个指令的 $compile(elem.innerHTML), 返回的link函数.