Angular的Directive,以及copmile和link方法
2016-01-31 15:46
603 查看
Directive,指令
在Angular中,是指嵌套在HTML模板中的指令,如Angular自带的ng-app ng-controller等,自带指令使用ng-前缀,自定义指令请避免使用。指令的声明形式
HTML标签元素指令,HTML标签属性指令,Class类指令和HTML注释指令。其中一般常用的为指令标签和属性标签。
简单的Directive定义
app.directive("myDirective", function() { return { restrict: "A", templateUrl: "context.html", replace: true } })其中,
restrict指定指令的声明形式
A表示标签属性指令,如 <my-directive> </my-directive>
E表示标签元素指令,如<div my-directive></div>
Class(C)和注释(M)两种形式请避免使用。
同时支持多种声明形式,可以写为"EA"
如果省略,系统默认为“A”。
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">templateUrl</span></li></ul>指令标签内容的模板URL。对于简单的模板,也可以使用template,直接写模板内容。
replace
表示指令产生的内容是否会替换整个标签,还是插入到标签的内容。
指令命名规范
指令定义时,需要使用驼峰格式命令,如myDirective。HTML中引用指令时,需要把驼峰命名进行拆分,可以采用多种方式,如
冒号:my:directive
横线:my-directive(推荐)
下划线:my_directive
x-前缀
data-前缀
推荐使用横线的形式。
指令中的compile和link
以上示例的Directive非常的简单,只是替换一个模板,这样简单的功能完全可以使用ng-include直接嵌入模板的内容。如果需要给Directive自定义事件或则用程序生成模板,该如何实现呢。这里,就需要用到compile和link函数了。
基于性能的考虑,Angular中,模板的处理过程分为compile和link两个阶段,Directive也会在这两个阶段分别进行处理。
compile阶段:compile阶段主要是对模板内容的处理,可以对模板内容进行修改,如ng-repeat就是在compile阶段执行的。
link阶段:link阶段主要对模板进行数据绑定和事件绑定等操作。
compile阶段
compile阶段会把HTML片段转换为DOM对象,在compile方法中对DOM进行操作。模仿ng-repeat指令,开发一个my-repeat指令,对子元素重复指定的次数。
先看下compile函数的定义。
function compile(element, attrs, transclude) { ... }element为指令所在的DOM对象,attrs为元素的属性字典,其他参数暂时未用到,可查看API。
app.directive('myRepeat', function($document) { return { restrict: 'A', compile: function(element, attrs) { var template = $(element).children().clone(); for(var i=0; i<attrs.myRepeat; i++) { $(element).append(template.clone()); } } } });
<ul my-repeat="5"> <li>Hello, my Repeat</li> </ul>
link阶段
link阶段主要是对元素绑定scope数据和进行事件绑定。function link(scope, element, attrs, controller) { ... }
scope为模板的作用域数据,其他参数名称自解释。
以一个密码框失去焦点时调用函数进行密码复杂度校验的指令为例。
app.directive('myBlur', function($document) { return { link: function(scope, element, attrs) { $(element).bind('blur', function(e){ scope.$apply(attrs.myBlur); }); } } })
<input type="password" ng-model="password" my-blur="checkComplex()" />
其中checkComplex为controller中的方法。
在Directive中compile和link函数不能同时出现,如果定义了compile函数,则会忽略link函数。
如果compile后要对数据进行绑定事件,则compile的返回值就定义为link函数。在link阶段,会调用compile的返回值作为link函数。
相关文章推荐
- 把网站链接卖一个好价钱: Text Link Ads 注册网赚攻略
- css import与link的区别
- angular.element方法汇总
- Angular用来控制元素的展示与否的原生指令介绍
- AngualrJS中的Directive制作一个菜单
- 使用angular写一个hello world
- vue,angular,avalon这三种MVVM框架优缺点
- 使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
- JavaScript link方法入门实例(给字符串加上超链接)
- 在JavaScript中处理字符串之link()方法的使用
- 利用CSS3在Angular中实现动画
- 理解Angular数据双向绑定
- Angular中的Promise对象($q介绍)
- Angular实现form自动布局
- 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
- angular简介和其特点介绍
- AngularJS使用angular-formly进行表单验证
- 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
- Angular中$compile源码分析
- 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法