AngularJs自定义指令

自定义的指令定义

• directive（）方法可以接受两个参数，第一个参数是指令的名字，第二个参数是函数，第二个参数用来返回指令的具体内容。
• 指令的参数

• restrict：EACM（分别对应元素、属性、类名、注释），主要体现在调用指令时的不一样
• 优先级：ngRepeat，来定该自定义标签的优先级，默认优先级是0
• terminal（布尔型）：可以 设置为true或是false，用来告诉angular当其停止的似乎，比该指令优先级低的话就会停止运行（当值为true的话）
• template（字符串或是函数）：参数是可以选择的，必须设置为一下两种形式之一
  （1）可以使HTML的文本 （2）可以接受两个参数,参数分别为tElement、tAttrs
• templateUrl(字符串或是函数)：参数可以选择，通常为以下几种类型
  （1）外部的HTML路径，可以进行跳转，跳转到外部的路径 （2）一个可以接受两个参数的函数，参数 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串。
• replace（布尔型）：一旦设定，则这个值是true，因为这个属性是默认存在的，存在的值就是false

• 指令的作用域

• 默认情况下，子指令会被赋予访问 父级DOM的元素对应作用域的能力
• Scope参数（布尔型或是对象）：当设置为true的时候，从父作用域会继承并创建一个新的对象--隔离作用域。
  ps:如果创建一个从外部原型继承作用域的指令，scope要设置为true
• 隔离作用域：（以面向对象为基础）：
  a.创建可以复用的组件，组件可以在未知的上下文进行使用，可以避免污染外部作用域或是不经意的污染内部作用域.
b.创建具有隔离作用域的要将scope属性设置为一个空的对象{ }，指令模板无法访问外部作用域。
• 绑定策略：AngularJs提供了几种将指令内部的隔离作用域，并且和外部的作用域进行数据的绑定
  a.本地作用域属性：@将本地作用域和DOM属性的值进行绑定，指令的内部也可以使用外部作用域的变量--@（@attr）
b.双向数据绑定：=可以将本地作用域上的属性和父级作用域上的属性进行双向的数据绑定。，本地的属性也会反映在父级数据模型发生的变化--=（=attr）
c.父级作用域绑定：&可以对父级的作用域进行绑定，换句话说：对这个值进行设置的时候，会生成一个指向父级作用域的包装函数。--&（&attr）可以查看这里和这里了解更多
• transclude:
  （1）是一个可选的参数，但是一旦设定，那么值必须是true，因为默认值就是false
（2）可以将任意内容和作用域传递给指令，该模板也可以访问外部的作用域对象
（3）为了将作用域传递进去，scope必须通过{}或true设置成隔离的作用域，if没有scope参数，指令内部的作用域将会被设置成传入模板的作用域
（4）应用场景：当你希望创建一个包含任意内容的指令的时候，将这个参数设置为true
• controller：参数可以是字符串或是函数
• controllerAs：设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访问 controllerAs（没啥用）
• require：设置参数可以是字符串或是数组， require 会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。
• 自定义渲染：以 parser 流水线完成后被调用。
• link：用link可以操作DOM的指令，这个函数是可选的；link函数对绑定了实时数据的DOM具有控制的能力，需要考虑一下性能的因素。
  （1）link的函数签名如下：link：function（scope，element，attrs）{对DOM进行操作}
（2）但是一旦指令的定义中有require，函数签名中就会有4个参数，代表了控制器或是所依赖的指令的控制器

• 小结：
  $scope:和指令相关联的当前作用域
  $element:当前指令对应的元素
  $attrs: 当前元素的组成的对象

    var a = 123
   

$transclude:嵌入函数会与对应的嵌入作用域进行预绑定