活动公告当前位置:星鸿娱乐 > 活动公告 > >

AngularJS directive返回对象属性详解

  

[AngularJS,directive返回对象属性]AngularJS directive返回对象属性详解

  

写在前面:由于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属性有一定联系,它用来判断是否停止运行当前元素上比本指令优先级低的指令,但相同优先级的依旧会执行  
  栗子:  
  

  
  
  //index.js  angular.module('myApp',[])  .directive('myDirective',function() {  return {  restrict: 'AE',  priority: 1,  template: '
hello world
'  };  })  .directive('myDirective1',function() {  return {  restrict: 'AE',  priority: 3,  terminal: true  };  })  
  
  
  
    
  
  
  

如果没有定义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: '
hello world
',  replace: true/false  };  })
  
  
  
    
  
  

当repalce取false时,浏览器端源码呈现为

hello world
  
  取true时,呈现为
hello world
  

  

7:transclude:Boolean  

  

栗子:  
  

  
  
    
world
  
  
  

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

  
  
  //index.js  angular.module('myApp',[])  .dirctive('myDirective',function() {  return {  restrict: 'EA',  transclude: true,  template: '
hello 星鸿娱乐注册
'  };  })  
  
  

上面js代码会将html文件指令中包含的world内嵌到模板中span元素中,注意,span元素添加了ng-transclude内置指令属性(这点很重要)  
  总之,该属性的作用,是告诉angularjs编译器,将它从DOM元素中获取的内容放到它发现ng-transclude指令的地方.

  
  以上就是本文的全部内容,希望对大家的学习有所帮助。

  

(责任编辑:admin)

上一篇:JavaScript中数据类型转换总结

下一篇:星鸿娱乐平台javascript中Date对象应用之简易日历实

推荐内容

客户服务热线

010-400-12345

在线客服