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) { } }; }]); 原文 http://www.cnblogs.com/waiting-h/p/5329063.html <!-- 知识不只是要学懂会用,能够清晰的讲解给他人并让他人也能明白才算融会贯通 --> <!-- 写在前面:由于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属性有一定联系,它用来判断是否停止运行当前元素上比本指令优先级低的指令,但相同优先级的依旧会执行 栗子: function() { return { restrict: 'AE',priority: 1,template: '<div>hello world</div>' }; }) .directive('myDirective1',153)">3,terminal: true }; }) <!-- index.html --> <div my-directive my-directive1></div> 如果没有定义myDirective1指令,结果浏览器会显示hello world,但添加了myDirective1指令之后,并将其优先级priority设置比myDirective大,且在myDirective1上设置属性terminal属性为true之后,便会停止myDirective指令的执行。 4:template:String/Function, 该属性定义一个模板(即在html文件中使用到该指令的部分会替换该模板内容,所以该模板主要是html格式) 属性有两种形式:一段html文本、一个返回模板字符串的函数,并且该函数接收两个参数:tElement,tAttrs 5:templateUrl:String/Function, 当模板内容比较多时,直接嵌套在template中会显得冗余,可以采取将模板代码单独存放在一个文件中,这时就会需要引入文件,templateUrl便可以做到 属性也有两种形式:一个代表外部html文件路径的字符串、一个返回外部html文件路径字符串的函数,该函数接收两个参数: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 }; }) <my-directive></my-directive>当repalce取false时,浏览器端源码呈现为<my-directive><div>hello world</div></my-directive> 取true时,呈现为<div>hello world</div> 7:transclude:Boolean,
栗子:
my-directive>world</div>
像这个例子中,如果指令内部有内容,一般情况下template模板会直接覆盖替换掉该内容,但现在我想把它保留下来,这时transclude就派上用途了 <div>hello <span ng-transclude></span></div>' }; }) 上面js代码会将html文件指令中包含的world内嵌到模板中span元素中,注意,span元素添加了ng-transclude内置指令属性(这点很重要) 总之,该属性的作用,是告诉angularjs编译器,将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方 所以返回的属性包含: 做个激励督策:下篇对scope,controller等相关属性进行讲解。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ionic-framework – 如何在Ionic V1 / Angular 1.x中导入io
- angularjs – 在ui-router中使用左栏布局的嵌套状态或视图?
- Angular 2 CLI:超出最大调用堆栈大小时出错
- 如何在WebService接收一个XML文件并解析,客户端如何发送这
- twitter-bootstrap – Bootstrap崩溃无法正常工作
- 如何在Vim中更改制表位后避免缩进错误?
- scala – 为什么类不能用相同签名的方法扩展traits?
- 2.2Bootstrap排版
- docker – 一个工作方法,用于数据提取非root命名的卷权限,
- scala – 嵌套宏调用是否安全?