angular的directive笔记

原贴地址

1，tansclude: 是指令能够能够把外部定义的内容传回指令模板内部(通过在内部标签使用ng-transclude)。这个外部指定的内容是根据外部的作用域控制的，跟指令的作用域无关。这个跟指令的模版解析是不一样的，指令模板解析的思路是模板-指令定义作用域名-外部作用域或者模板-指令定义作用域名-元素属性-外部作用域。当想要把任意内容引入到指令中时就需要开启这个功能。

2, '&'绑定: &绑定使我们可以在指令的作用中调用传递的函数，但是运行在注册时候定义的作用域上下文。绑定的方式实质是开放一个函数给孤立作用域，使孤立作用域可以调用外部的函数。

3, requre中一些符号好: '^'表示在父元素中寻找匹配的指令，如果没有的话则会报错; 如果没有'^',表示会在本身的元素上寻找这个指令; ‘?’ 表示找不到的话，不会报错。从这里可以看出require只能寻找本身和父元素上的指令，而不能作用到兄弟元素上面。找到requre定义的指令之后，该指令上定义的控制器实例就可以通过link函数的第四个参数来获取到，注意是控制器实例，所以能访问到的是该控制器上用this定义的属性和方法。

4, 指令上controller跟link的区别: 这两个都可以获取到作用域,元素,属性等引用，也都会执行一次，他们的基本区别是，控制器可以暴露一个API，而link可以通过require与其他的指令控制器交互。所以如果要开放出一个API给其他指令用就写在controller中，否则写在link中。

5, normalization: 在匹配指令的时候，angular会规范化收集的元素和属性的名字，然后再与定义的指令名字相匹配，主要过程有: 1)去掉元素或属性上面的x-和data-的前缀; 2)转化':','-'和‘_-’形式的命名为驼峰式拼写。虽然可以有多种拼写方式，但是推荐使用ng-bind或者data-ng-bind这种写法，其他的写法是因历史遗留原因而存在。

6, ng使用$compile服务搜索element name，attribute，class name和comment来匹配指令，推荐优先使用element name 和 attribute name 来匹配，这样更容易匹配(更容易理解？还是内部有优化？)。comment方法常用来某些DOM API 限制的一些场景下，比如说table元素不能嵌套使用，所以在重写table元素功能的时候，就要通过comment方式引入。

7, ng使用$interpolate服务来处理文本和属性值，以便查找里面是否含有内嵌的表达式。浏览器对合法的属性值是有限制的，由于DOM API的限制，某些情况下使用cx='xxx';会报错，因此可以通过改用ng-attr-cx="xxx"来避开这个限制。

8, 指令名使用属性还是元素，当你创建的指令作为一个组件(拥有自己的模板之类的东西)时使用元素，当你的指令指向为已有的指令装饰新功能,添加新行为的话就使用属性。

9, isolate scope的作用: 如果没有isolate scope，指令使用的作用域会自动继承父元素的作用域，这样子每次使用指令都需要手工去创建一个控制器供指令使用， 这是非常麻烦的。isolate scope 是指令的作用域与外部作用域分离，同时isolate scope又可以通过特定的语法映射外部的作用域到指令作用域。

10, ng会触发一些特殊的事件，比如说当编译过的DOM被移除掉的时候，会触发$destory事件，当某个作用域被移除的时候，会触发$destory事件向下广播。默认的注册在元素或作用域上的监听器在元素或作用域被移除的时候自动移除。注册在服务上的监听器需要手工移除(例子？)

11, 指令中需要用到的表达式解析: 假设解析这段指令my name is {{name}}。首先是指令内部模板的解析，是利用指令的scope，如果没有定义这个选项，会自动继承外部的作用域。然后指令上的任何属性都会被指令收集到，所以这个customer也会被收集到，如果在scope上有定义属性的值包含customer，那么这个customer会被链接到。再有一个，就是customer的属性值name，这个是被父作用域解析的，与指令无关。最后，指令内部的内容{{name}},假如你什么都不做，在指令的中添加一段内容，这段内容会自动的被指令的模板替换掉，如果使用ng-transclude那么会被引用到模板中，而且根据外部的作用域来解析这段内容。