AngularJS - 指令的设置选项

Posted 2022-01-20 mpci

 

restrict : 字符串

控制指令在DOM中是以什么形式被声明的, 默认值是 ‘A‘

可选参数如下

　　E 元素 : <my-directive></my-directive>

　　A 属性 : <div my-directive></div>

　　C 类 : <div class="my-directive"></div>

　　M 注释 : <!--directive:my-directive-->

这些参数可以单独使用 , 也可以混合使用 , 如 ‘AE‘

 

priority : 数值

优先级 , 根据数值的大小进行先后调用 , 默认值为 0

 

terminal : 布尔

是否停止运行当前元素上比本指令优先级低的指令

 

template : 字符串 或 函数 

字符串 : 一段 html 文本

函数 : function (tElement, tAttrs ) , 返回值是代表模版的字符串

 

templateUrl : 字符串 或 函数

字符串 : 表示 HTML 文件路径的字符串

函数 : function( tElement, tAttrs ) , 返回值是表示 HTML 文件路径的字符串

 

replace : 布尔

值为 true 时 , 模版会直接替换调用这个指令的元素 , 默认值为 false , 模版会插入到调用这个指令的元素的内部

 

scope : 布尔 或 对象

布尔 : 如果为 true , 会从父作用域继承并创建一个新的作用域对象 , 默认值为 false

对象 : 创建具有隔离作用域的指令 , 给 scope 属性赋值一个空对象 ( scope : ) 就可以了

隔离作用域与指令外部的作用域进行数据绑定的几种方法 : 

　　本地作用域属性 : 使用 @ 符号 或 @attr ( attr为元素上的属性名, 要用驼峰命名法 )

　　双向绑定 : 使用 = 符号 或 =attr 

　　父级作用域绑定 : 使用 & 或 &attr 

 

transclude : 布尔

是否需要将当前指令内部的子元素嵌入到指令中 , true为需要 , 默认为false

 

controller : 字符串 或 函数 

字符串 : 如果参数为字符串 , 则会以这个字符串为名字 , 在应用中查找注册的控制器

函数 : 通过匿名构造函数的方式定义一个内联控制器

 

controllerAs : 字符串 

设置控制器的别名

 

require : 字符串 或 数组 

字符串或数组中的元素代表着另一个指令的名字 , 并将名字对应的指令的控制器传入到链接函数中的第四个参数上 , 

在参数前面添加前缀可以改变查找控制器的方式

　　? : 如果在当前指令中没有找到所需要的控制器 , 会将null传给link函数的第四个参数

　　^ : 指令会在上游指令链中查找require参数所指定的指令的控制器

　　?^ : 两个指令可以组合使用

　　不加前缀 : 如果没有前缀 , 指令将会在自身所提供的控制器中进行查找 , 如果没有找到 , 则抛出一个错误

 

link : 函数 

链接函数会在模板编译并同作用域进行链接后被调用 , 它负责设置事件监听器 , 监视数据变化和实时的操作DOM

链接函数的签名 , link : function(scope, element, attrs, controllers) , 如果指令定义中有 require 这个参数 , 则 link 函数会有第四个参数

　　scope : 在指令内部注册监听器的作用域

　　element : 使用这个指令的元素 

　　attrs : 实例的属性

　　controllers : 指向 require 对应的控制器 , 如果没指定 require , 那么 controllers 的值为 undefined

 

compile : 函数

编译函数负责对模版DOM进行转换 , 在函数中可以更改DOM元素 , 或者对DOM元素事件进行绑定 , 返回值是个函数 , 这个返回的函数就是 link 

compile 和 link 是互斥的 , 如果同时设置这两个参数 , 那么会把 compile 返回的函数当作 link 函数 , link 将会被 compile 返回的函数重载