Skip to content

Latest commit

 

History

History
11 lines (11 loc) · 4.3 KB

directive-notes.md

File metadata and controls

11 lines (11 loc) · 4.3 KB
  • 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, ng中一些执行的流程,首先在注册watch的时候,解析好watch里面的表达式,如果是字符串会追踪到作用域上面的值然后生成一个函数watchFn,如果是函数的话直接就是watchFn,然后利用这个digest比较的时候,就是利用这个watchFn来进行获取新新值的,就是说第一次把字符串匹配到对象上面之后,以后每次直接去访问该对象就可以了。异步解析是把所有的解析放到最后去做,angular里面的实现是通过在digest里面,在比较之前去解析异步解析的内容。要区分解析的过程和循环的过程。