Angularjs之directive指令学习笔记（二）

1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法

参考文章链接地址：http://damoqiongqiu.iteye.com/blog/1917971

1.指令（directive）的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签

2.directive中几个属性的介绍：

①restrict：表明指令的声明方式，选项E(元素Element)，A（属性Attribute），C（样式类Class），M（注释Comment）

②template/templateUrl:替换自定义元素的html的标签及内容

③replace:true/false :决定自定义标签的显示及隐藏

④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变

⑤link:一些事件需要绑定到某个元素上，那么你需要提供一个link函数

---

http://www.cnblogs.com/jimmychange/p/3498906.html

compile：  在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope，

link：此函数的主要作用就是对DOM和scope做数据绑定。和compile不同，在这个函数中，已经可以访问scope了。
template和templateUrl：用于指定directive对应的模板，前者直接使用字符串定义模板，而后者则通过url链接外部模板文件。在模板中可以使用对应controller或者rootScope中的scope，当然也有例外，具体请看关于scope的解释。
replace：指定是否使用模板替换directive作用的DOM元素。
priority：指定优先级，angular在处理directive时，会将页面出现的所有directive按优先级排序，一般这个数值都是不指定的。
controller：directive对应的controller，通常用于directive之间的通信。在这个函数中，所有绑定到this上的变量，其他的directive都能通过使用require来进行访问。
require：通过指定某个directive的名字，来访问其对应的controller。其中以？作为前缀时，如果找不到此directive将报错，而以^为前缀，将会在父元素进行递归查找，可以使用数组来引入多个directive，如['directive1','directive2','directive3']
scope：用于指定当前directive所对应的scope，不同的取值之间的影响非常大。

1. false：此时directive与父元素共享scope
2. true：此时directive有自己的scope，该scope继承父元素所对应的scope
3. isolate：directive有自己的scope，该scope不会继承自父元素对应的scope，但是仍然可以通过scope.$parent访问父节点的scope。这不是一个推荐的做法，因为这样就对父元素进行了限制，影响了directive的使用范围。如果想在父子元素之间共享数据，可以明确指定那些元素需要父子之间共享。方法共有三种：
使用@将父级scope中的属性绑定到本地scope中，单向绑定，这个值总是字符串，在template中需要使用{{}}
使用=同上，只不过这里是双向绑定，在template中可以直接给出父级scope的属性名称
使用&用于倒入函数或者表达式

transclude：用于控制是否要将该directive的子元素添加到模板中ng-tranclude指定的元素之下

---

2.Angularjs指令directive之require和了$parsers这个属性和$setValidity()方法

http://hudeyong926.iteye.com/blog/2074238

在自定义Angular指令时，其中有一个叫做require的字段，这个字段的作用是用于指令之间的相互交流.eg:require:’ngModel’引用内置指令require: '?^common'引用自定义指令

引用内置指令

angular.module('myApp')
.directive('spoint', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80];
ctrl.$parsers.unshift(function(viewValue) {
if (fibonacci.indexOf(parseInt(viewValue)) >= 0) {
ctrl.$setValidity('fibonacci', true);
return viewValue;
} else {
ctrl.$setValidity('fibonacci', false);
return undefined;
}
});
}
};
});  

这里值得注意的是directive里link方法的第四个参数，我们在require里定义了ngModel 所以这里它是一个NgModelController

NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们这里只介绍其中和表单验证有关的几个方法和属性。

上面的例子中我们用到了$parsers这个属性和$setValidity()这个方法。 $parsers里保存了一组function， 每当DOM里数据变化的时候， 这组function会被一次调用。这里给了我们机会在用户修改了DOM里值的时候， 去对新输入的值做校验。

3.Directive的书写格式和参数说明，controler,complie,link的区别Scope：定义映射关系

   参考文章链接地址 http://blog.51yip.com/jsjquery/1607.html

controller，link，compile有什么不同

运行结果：Hello 1111 22222 44444 55555 !

由结果可以看出来，controller先运行，compile后运行，link不运行。

将上例中的compile注释掉

运行结果：

1. Hello 1111 22222 33333 !

由结果可以看出来，controller先运行，link后运行，link和compile不兼容。