angularJS——自定义指令

时间 2019-11-12
原文原文链接
主要介绍指令定义的选项配置html
  1 //angular指令的定义，myDirective ，使用驼峰命名法
  2 angular.module('myApp', [])
  3 .directive('myDirective', function ($timeout, UserDefinedService) {
  4 // 指令操做代码放在这里
  5 });
  6 
  7 //angular自定义指令 的使用，使用 “-” 来代替驼峰命名法
  8 <div my-directive></div>
  9 注意：为了不与将来的HTML标准冲突，给自定义的指令加入前缀来表明自定义的
 10 命名空间。AngularJS自己已经使用了 ng- 前缀，因此能够选择除此之外的名字。
 11 在例子中咱们使用 my- 前缀（好比 my-derictive ） 。
 12 
 13 指令的生命周期开始于 $compile 方法并
 14 结束于 link 方法
 15 
 16 //自定义指令的所有可设置的属性大体以下
 17 指令的选项以下所示，每一个键的值说明了能够将这个属性设置为什么种类型或者什么样的
 18 函数：
 19 angular.module('myApp', [])
 20 .directive('myDirective', function() {               //指令名称myDirective
 21 return {                //返回一个对象
 22 restrict: String,      //可选字符串参数，能够设置这个指令在DOM中能够何种形式被声明，
 23             //默认为A（attr(当作标签属性来使用)）<div my-directive></div> 
 24             // 设置为“E”(ele,(直接当作标签来使用)) <my-directive></my-directive>
 25             //C（类名）
 26             //<div class="my-directive:expression;"></div>
 27             //M（注释）
 28             //<--directive:my-directive expression-->
 29             //这些选项能够单独使用，也能够混合在一块儿使用：
 30             //angular.module('myDirective', function(){
 31             //    return {
 32             //        restrict: 'EA' // 输入元素或属性
 33             //    };
 34             //})
 35 
 36 priority: Number, //优先级，可忽略，默认为0， ngRepeat的优先级为1000，这样就能够保证在同一元素上，它老是在其余指令以前被调用。
 37 terminal: Boolean,//（布尔型），true或false,若是为false,则这个参数用来告诉AngularJS中止运行当前元素上比本指令优先级低的指令。优先级相同的指令仍是会被执行。 ngIf 的优先级略高于 ngView ，
 38 template: String or Template Function: //（字符串或函数）指令中的一个重要的一个属性，必须被设置其中一种
 39                     //1，  一段HTML文本；
 40                     //2，能够接收两个参数的函数，参数为 tElement 和 tAttrs 
 41                     //在html模板中必须只有一个根html标签,且若是有换行则须要使用“\”
 42                     //例如template: '\
 43                     //    <div> <-- single root element -->\
 44                     //        <a href="http://google.com">Click me</a>\
 45                     //        <h1>When using two elements, wrap them in a parent element</h1>\
 46                     //    </div>\
 47                     //function(tElement, tAttrs) (...},
 48                     //更好的选择是使用 templateUrl 参数引用外部模板，参考下面的参数
 49 templateUrl: String,        //（字符串或函数）1，外部路径的字符串，2，接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串
 50                 //模板加载后，AngularJS会将它默认缓存到 $templateCache 服务中。（能够提早加载模块到缓存中，提升加载速度）
 51 replace: Boolean or String,  //（布尔型）默认为false(模板内容会加载到标签内部)，true(模板内容会替换当前标签)
 52 scope: Boolean or Object,  //（布尔型或对象）,默认为false, 设置为true 时，会从父做用域继承并建立一个新的做用域对象。
 53             // ng-controller 的做用，就是从父级做用域继承并建立一个新的子做用域。
 54             //若是要建立一个可以从外部原型继承做用域的指令，将 scope 属性设置为 true 
 55             //设置为一个对象，则能设置 隔离做用域， scope 属性设置为一个空对象 {} 。若是这样作了，指令的模板就没法访问外部做用域了：
 56             //例如.directive('myDirective', function() {
 57             //        return {
 58             //            restrict: 'A',
 59             //            scope: {},
 60             //            priority: 100,
 61             //            template: '<div>Inside myDirective {{ myProperty }}</div>'
 62             //        };
 63             //    });
 64 
 65             //在scope对象中，还可使用“@” “=” “&”,来设置模板中数据的做用域和绑定规则
 66             //"@"  本地做用域属性：使用当前指令中的数据和DOM属性的值进行绑定
 67             //“=” 双向绑定：本地做用域上的属性同父级做用域上的属性进行双向的数据绑定。
 68             //“&” 父级做用域绑定：经过 & 符号能够对父级做用域进行绑定
 69             //例如
 70             //scope: {
 71             //    ngModel: '=', // 将ngModel同指定对象绑定
 72             //    onSend: '&', // 将引用传递给这个方法
 73             //    fromName: '@' // 储存与fromName相关联的字符串
 74             //}
 75 
 76 transclude: Boolean,  //默认为false.只有当你但愿建立一个能够包含任意内容的指令时， 才使用 transclude: true 。
 77             //若是指令使用了 transclude 参数，那么在控制器（下面立刻会介绍）中就没法正常监听数
 78             //据模型的变化了。
 79 controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, //（字符串或函数)注册在应用中的控制器的构造函数
 80             //使用函数建立内联控制器，例如
 81             //angular.module('myApp',[])
 82             //    .directive('myDirective', function() {
 83             //    restrict: 'A',
 84             //    controller:
 85             /    function($scope, $element, $attrs, $transclude) {
 86             //    // 控制器逻辑放在这里
 87             //    }
 88             //})
 89 
 90 controllerAs: String,   //能够在指令中建立匿名控制器,例如
 91             //.directive('myDirective', function() {
 92             //    return {
 93             //    restrict: 'A',
 94             //    template: '<h4>{{ myController.msg }}</h4>',
 95             //    controllerAs: 'myController',
 96             //    controller: function() {
 97             //        this.msg = "Hello World"
 98             //        }
 99             //    };
100             //});    
101 
102 
103 require: String, //（字符串或数组）字符串表明另一个指令的名字,若是没有前缀，指令将会在自身所提供的控制器中进行查找，若是没有找到任何控制器（或
104         //具备指定名字的指令）就抛出一个错误。
105         //例如
106         //若是不使用 ^ 前缀，指令只会在自身的元素上查找控制器。
107         //require: 'ngModel'
108         // 使用 ?   若是在当前指令中没有找到所须要的控制器，会将 null 做为传给 link 函数的第四个参数
109         //require: '?ngModel'
110         //使用  ^  若是添加了 ^ 前缀，指令会在上游的指令链中查找 require 参数所指定的控制器。
111         //require: '^ngModel'
112         // 使用 ^？  将前面两个选项的行为组合起来，咱们可选择地加载须要的指令并在父指令链中进行查找。
113         //require: '^?ngModel',
114 
115 link: function(scope, iElement, iAttrs) { ... }, //compile 选项自己并不会被频繁使用，可是 link 函数则会被常用。
116                         //当咱们设置了 link 选项， 其实是建立了一个 postLink() 连接函数， 以便 compile() 函数能够定义连接函数。
117                         //compile 和 link 选项是互斥的。若是同时设置了这两个选项，那么会把 compile
118                         //所返回的函数看成连接函数，而 link 选项自己则会被忽略。
119                         //一般状况下，若是设置了 compile 函数，说明咱们但愿在指令和实时数据被放到DOM中以前
120                         //进行DOM操做，在这个函数中进行诸如添加和删除节点等DOM操做是安全的。
121         //用 link 函数建立能够操做DOM的指令。
122         //require 'SomeController',
123         //link: function(scope, element, attrs, SomeController) {
124             // 在这里操做DOM，能够访问required指定的控制器
125         //}
126 compile: function(tElement, tAttrs, transclude) {  
127         return {
128             pre: function(scope, iElement, iAttrs, controller) { ... },
129             post: function(scope, iElement, iAttrs, controller) { ... }
130         }
131         // 或者
132         return function postLink(...) { ... }
133     }
134 };
135 });