Angular的Directive,以及copmile和link方法
来源:互联网 发布:js鼠标悬停图片放大 编辑:程序博客网 时间:2024/06/07 22:46
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函数。
- Angular的Directive,以及copmile和link方法
- Angular的Directive,以及copmile和link方法
- angular的directive指令的link方法
- angular的directive的属性和用法
- angular之Directive - Compile vs. Link
- angular directive的使用
- angular指令的简单案例和解释directive
- 关于directive里的link和controller区别
- angular之link和compile的区别
- angular中compile和link的区别
- angular之link和compile的区别
- angular directive
- angular directive
- angular创建新指令directive中scope的作用以及绑定策略
- angular中,controller、directive和factory
- angularjs的controller directive angular-resource
- 关于Angular中directive的简单应用
- angular中directive的scope用法
- JAVA入门自学笔记
- redis 的无序集合和hash操作
- C++ STL仿函数
- CookieContainer加不了cookie加不了Cookie解决办法
- Ajax实战总结——用原生JavaScript代码封装自己的Ajax核心对象
- Angular的Directive,以及copmile和link方法
- java微信公众平台分享朋友圈
- Spring/Hibernate/Proxool集成
- 数据结构-二叉树
- 6. 【创建和销毁对象】消除过期的对象引用
- java微信公众号开发怎样进行本地联调
- android模拟器 Genymotion 安装破解版
- ightoj 1011 状态压缩dp
- Android Fragment 真正的完全解析(上)