AngularJS directive返回对象属性详解  更新时间:2016年03月28日 15:00:58   作者:waiting_h   这篇文章主要为大家纤细介绍了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指令的地方. 以上就是本文的全部内容,希望对大家的学习有所帮助。 您可能感兴趣的文章: angularJS+requireJS实现controller及directive的按需加载示例 angularjs使用directive实现分页组件的示例 详解angularJs中自定义directive的数据交互 AngularJS中directive指令使用之事件绑定与指令交互用法示例 AngularJs directive详解及示例代码 Angularjs使用directive自定义指令实现attribute继承的方法详解 学习AngularJs:Directive指令用法(完整版) AngularJS入门心得之directive和controller通信过程 AngularJS中的Directive实现延迟加载 AngularJS中的Directive自定义一个表格 Angular之指令Directive用法详解 AngularJS directive 相关文章 总结十个Angular.js由浅入深的面试问题 这篇文章虽然只有10个问题,但是覆盖了angular开发中的各个方面,有基本的知识点,也有在开发过程中遇见的问题,同时也有较为开放性的问题去辨别面试者的基础水准和项目经验,注意答案仅供参考哦~ 2016-08-08 AngularJS中实现动画效果的方法 本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下 2016-07-07 Angularjs cookie 操作实例详解 本文给大家分享Angularjs cookie 操作实例详解,demo案例分析,感兴趣的朋友参考下吧 2017-09-09 详解在Angular项目中添加插件ng-bootstrap 这篇文章主要介绍了详解在 Angular 项目中添加插件 ng-bootstrap,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-07-07 AngularJS基础 ng-if 指令用法 本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下 2016-08-08 Angular浏览器插件Batarang介绍及使用 本篇文章主要介绍了Angular浏览器插件Batarang介绍及使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 Angular入口组件(entry component)与声明式组件的区别详解 这篇文章主要给大家介绍了关于Angular入口组件(entry component)与声明式组件的区别的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-04-04 AngularJS实现页面定时刷新 本篇文章主要介绍了AngularJS实现页面定时刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-03-03 angular-ui-sortable实现可拖拽排序列表 这篇文章主要介绍了angular-ui-sortable实现可拖拽排序列表,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 angularjs实现对表单输入改变的监控(ng-change和watch两种方式) 这篇文章主要介绍了angularjs通过ng-change和watch两种方式实现对表单输入改变的监控,需要的朋友可以参考下 2018-08-08 最新评论

 写在前面:由于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: '<div>hello world</div>'
  };
})
.directive('myDirective1',function() {
  return {
    restrict: 'AE',
    priority: 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
  };  
}) 
 <!-- index.html -->
<my-directive></my-directive>

当repalce取false时,浏览器端源码呈现为<my-directive><div>hello world</div></my-directive>
取true时,呈现为<div>hello world</div>

7:transclude:Boolean

栗子:

<!-- index.html -->
<div my-directive>world</div>

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

//index.js
angular.module('myApp',[])
.dirctive('myDirective',function() {
  return {
    restrict: 'EA', 
    transclude: true,
    template: '<div>hello <span ng-transclude></span></div>'
  };
})

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

您可能感兴趣的文章:

  • angularJS+requireJS实现controller及directive的按需加载示例
  • angularjs使用directive实现分页组件的示例
  • 详解angularJs中自定义directive的数据交互
  • AngularJS中directive指令使用之事件绑定与指令交互用法示例
  • AngularJs directive详解及示例代码
  • Angularjs使用directive自定义指令实现attribute继承的方法详解
  • 学习AngularJs:Directive指令用法(完整版)
  • AngularJS入门心得之directive和controller通信过程
  • AngularJS中的Directive实现延迟加载
  • AngularJS中的Directive自定义一个表格
  • Angular之指令Directive用法详解
张贴在3