angularjs学习笔记之directive的返回对象属性（一）

大佬教程收集整理的这篇文章主要介绍了angularjs学习笔记之directive的返回对象属性（一），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

指令的函数，所能返回的所有属性

.directive('',['',function(){
        // Runs during compile
        return {
            // name: '',// priority: 1,// terminal: true,// scope: {},// {} = isolate,true = child,false/undefined = no change
            // controller: function($scope,$element,$attrs,$transcludE) {},// require: 'ngModel',// Array = multiple requires,? = optional,^ = check parent elements
            // reStrict: 'A',// E = Element,A = Attribute,C = Class,M = Comment
            // template: '',// templateUrl: '',// replace: true,// transclude: true,// compile: function(tElement,tAttrs,function transclude(function(scope,cloneLinkingFn){ return function linking(scope,elm,attrs){}})),link: function($scope,iElm,iAttrs,controller) {
                
            }
        };
    }]);

<!-- 知识不只是要学懂会用，能够清晰的讲解给他人并让他人也能明白才算融会贯通 -->

<!-- 写在前面：由于directive部分是angularjs中的重中之重，所以会分多篇章进行讲解。本章主要讲解directive返回对象中比较简单的属性 -->

angularjs中使用.directive()来定义指令，该方法接收两个参数：name（指令的名字）、factory_function（该函数定义指令的全部行为，返回一个对象）

//index.js
angular.module('myApp',[]);
myApp.directive('myDirective',function() {return {};});

返回对象中包含以下属性及方法：

1：reStrict：String，

该属性用来说明myDirective指令在DOM中是以何种形式被声明的（即在html中该把它用在什么地方）

该属性可选值有：E(元素)、A（属性，默认值）、C（类名）、M（注释），可单独使用，也可组合使用

看到过一种说法：如果是想要自定义一个独立的指令功能，即该指令独立完成一系列操作，不用依附其他元素、属性等，就将该指令定义为元素；如果想要用该指令来扩展某已存在指令的功能，便将其定义为属性。不知道这么理解是否合理，但确实也是一个很好的可以借鉴的选择方法标准

2：priority：number，

该属性用来定义指令的优先级（默认为0，ngRepeat是所有内置指令中优先级最高的，为1000），优先级高的先执行。

3：terminal：Boolean，

该属性与priority属性有一定联系，它用来判断是否停止运行当前元素上比本指令优先级低的指令，但相同优先级的依旧会执行

String"="" style="color:rgb(221,function() {
    return {
        reStrict: 'AE',priority: 1,template: '<div>Hello world</div>'
    };
})
.directive('myDirective1',153)">3,terminal: true
    };
})

<!-- index.html -->
<div @H_557_69@my-directive @H_254_71@my-directive1></div>

4：template：String/Function，

该属性定义一个模板（即在html@L_772_31@中使用到该指令的部分会替换该模板内容，所以该模板主要是html格式）

属性有两种形式：一段html文本、一个返回模板字符串的函数，并且该函数接收两个参数：tElement，tAttrs

5：templateUrl：String/Function，

当模板内容比较多时，直接嵌套在template中会显得冗余，可以采取将模板代码单独存放在一个@L_772_31@中，这时就会需要引入@L_772_31@，templateUrl便可以做到

属性也有两种形式：一个代表外部html@L_772_31@路径的字符串、一个返回外部html@L_772_31@路径字符串的函数，该函数接收两个参数：tElement，tAttrs

6：replace：Boolean，

该属性默认值为false，指明模板是会被当做子元素插入到调用该指令的元素内部，还是覆盖取代调用该指令的元素。

//index.js
angular.module('myApp',[])
.directive('myDirective',function() {
    return {
        reStrict: 'A',template: '<div>Hello world</div>',replace: true/false
    };    
})   

<@H_704_67@my-directive></@H_704_67@my-directive>

取true时，呈现为<div>Hello world</div>

7：transclude：Boolean，

像这个例子中，如果指令内部有内容，一般情况下template模板会直接覆盖替换掉该内容，但现在我想把它保留下来，这时transclude就派上用途了

<div>Hello <span ng-transclude></span></div>'
    };
})

上面js代码会将html@L_772_31@指令中包含的world内嵌到模板中span元素中，注意，span元素添加了ng-transclude内置指令属性（这点很重要）

总之，该属性的作用，是告诉angularjs编译器，将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方

所以返回的属性包含：

做个激励督策：下篇对scope，controller等相关属性进行讲解。

大佬总结

以上是大佬教程为你收集整理的angularjs学习笔记之directive的返回对象属性（一）全部内容，希望文章能够帮你解决angularjs学习笔记之directive的返回对象属性（一）所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。