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 相关文章推荐
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
JS取request值以及自动执行使用示例
2014/02/24 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
python Tkinter的图片刷新实例
2019/06/14 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
浅谈python出错时traceback的解读
2020/07/15 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
Android面试宝典
2013/08/06 面试题
android面试问题与答案
2016/12/27 面试题
公务员培的训心得体会
2014/09/01 职场文书
优秀员工自荐书
2015/03/06 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python