AngularJS directive返回对象属性详解


Posted in Javascript onMarch 28, 2016

 写在前面:由于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指令的地方.
以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
javascript实现表单验证
Jan 29 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
Boostrap模态窗口的学习小结
Mar 28 #Javascript
理解javascript模块化
Mar 28 #Javascript
谈一谈jQuery核心架构设计
Mar 28 #Javascript
javascript函数自动执行常用方法汇总
Mar 28 #Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 #Javascript
JavaScript常用本地对象小结
Mar 28 #Javascript
Bootstrap 粘页脚效果
Mar 28 #Javascript
You might like
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Vue实现购物车场景下的应用
2017/11/27 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python 经典数字滤波实例
2019/12/16 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
专科应届生求职信
2013/11/24 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
我的五年职业生涯规划
2014/01/23 职场文书
电子专业自荐信
2014/07/01 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
信访工作汇报材料
2014/10/27 职场文书
课外活动总结
2015/02/04 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
Python实现聚类K-means算法详解
2022/07/15 Python