angular指令 directive

标签：控制   direct   html文本   相同   attrs   angularjs   pos   元素   []   

directive接受两个参数，指令的名字（字符串）和方法（这个函数返回一个对象，其中定义了指令的全部行为）：

angular.module(‘myApp‘, [])
.directive(‘myDirective‘, function() {
　　return {
　　　　restrict: String,
　　　　priority: Number,
　　　　terminal: Boolean,
　　　　template: String or Template Function:function(tElement, tAttrs) (...},
　　　　templateUrl: String,
　　　　replace: Boolean or String,
　　　　scope: Boolean or Object,
　　　　transclude: Boolean,
　　　　controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... },
　　　　controllerAs: String,
　　　　require: String,
　　　　link: function(scope, iElement, iAttrs) { ... },
　　　　compile: //// 返回一个对象或连接函数，如下所示：
　　　　　　function(tElement, tAttrs, transclude) {
　　　　　　　　return {
　　　　　　　　　　pre: function(scope, iElement, iAttrs, controller) { ... },
　　　　　　　　　　post: function(scope, iElement, iAttrs, controller) { ... }
　　　　　　　　}
　　　　　　　　//或者
　　　　　　　　return function postLink(...) { ... }
　　　　　　}
　　};
});

注：

　　1. restrict：（E元素A属性C类名M注释）

　　　　restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默认AngularJS认为restrict的值是A，即以属性的形式来进行声明。

　　2. priority：优先级

　　　　优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0，但也有些场景设置高优先级是非常重要甚至是必须的。

　　　　如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

　　3. terminal

　　　　terminal是一个布尔型参数，可以被设置为true或false。这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。

　　4. template（字符串或函数）

　　　　template参数是可选的，必须被设置为以下两种形式之一：

　　　　　　（1）一段HTML文本；

　　　　　　（2）一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。在讨论链接和编译设置时会详细介绍，模板元素或属性与实例元素或属性之间的区别。

　　5. templateUrl（字符串或函数）

　　　　templateUrl是可选的参数，可以是以下类型：

　　　　　　（1）一个代表外部HTML文件路径的字符串；

　　　　　　（2)一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。

　　6. replace

　　　　replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部

　　7. scope参数（布尔型或对象）

　　　　scope参数是可选的，可以被设置为true或一个对象。默认值是false。当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。

　　　　隔离作用域：创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的模板就无法访问外部作用域了。

　　　　绑定策略：使用无数据的隔离作用域并不常见，AngularJS 提供了几种方法能够将指令内的隔离作用域同外部的作用域进行数据绑定。

　　　　　　本地作用域属性：使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：@ (or @attr)；

　　　　　　　　　　　　　　双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。= (or =attr)

　　　　　　　　　　　　　　父级作用域绑定 通过&符号可以对父级作用域进行绑定，以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。& (or &attr)　　　　　

　　8. transclude

　　　　transclude是一个可选的参数。如果设置了，其值必须为true，它的默认值是false。

　　9. controller（字符串或函数）

　　　　controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数：

angular指令 directive

标签：控制   direct   html文本   相同   attrs   angularjs   pos   元素   []   

原文地址：http://www.cnblogs.com/rechel/p/7615484.html