AngularJS的指令(Directive) compile和link的区别及使用示例
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应。
输入 camnpr
失去焦点后提示 camnpr 这个用户名已经存在
用户名已经存在
HTML代码如下:
<body ng-controller="MainCtrl">
<lable>用户名:
<input type="text" ng-model="username" ng-blur="checkUsername()" />
<span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span>
</lable>
</body>
controller和directive的定义
app.controller('MainCtrl', function($scope) {
$scope.checkUsername = function() {
//send ajax to check on server
if ($scope.username === 'hellobug') {
$scope.usernameAlreadyExist = true;
}
}
});
app.directive('ngBlur', function($document) {
return {
link: function(scope, element, attrs) {
$(element).bind('blur', function(e){
scope.$apply(attrs.ngBlur);
});
}
}
})
在上面的例子里,directive返回对象里定义的link
方法在blur事件触发时执行了scope上的checkUsername()
方法。
如果是只有link
方法,也可以简单的写成下面这种形式~直接返回link
对应的function~
directive的简单写法
app.directive('ngBlur', function($document) {
return function(scope, element, attrs) {
$(element).bind('blur', function(e){
scope.$apply(attrs.ngBlur);
});
};
})
再来这样一个功能,我想让内容为哈哈哈哈
的dom元素重复n遍,n是自定义的,以达到某种满屏大笑丧心病狂的效果 -_-,我知道ng-repeat
就已经能干这事儿了,但是如果自己实现一下呢~
HTML
<ul repeater="20">
<li>哈哈哈哈</li>
</ul>
directive的定义
app.directive('repeater', function($document) {
return {
restrict: 'A',
compile: function(element, attrs) {
var template = $(element).children().clone();
for(var i=0; i<attrs.repeater - 1; i++) {
$(element).append(template.clone());
}
}
}
});
在上面例子的compile
方法里,子元素被复制成了repeater
制定的数量。
什么时候用compile,什么时候用link呢,或者两者可不可以一起用呢?
先从directive是如何在angular手下生效的说起吧~
编译三阶段:
1. 标准浏览器API转化
将html转化成dom,所以自定义的html标签必须符合html的格式
2. Angular compile
搜索匹配directive,按照priority
排序,并执行directive上的compile
方法
3. Angular link
执行directive上的link
方法,进行scope绑定及事件绑定
为什么编译的过程要分成compile和link?
简单的说就是为了解决性能问题,特别是那种model变化会影响dom结构变化的,而变化的结构还会有新的scope绑定及事件绑定,比如ng-repeat
compile
和link
的形式
compile
function compile(element, attrs, transclude) { ... }
- 在compile阶段要执行的函数,返回的function就是link时要执行的function
- 常用参数为
element
和attrs
,分别是dom元素和元素上的属性们,其它的以后细说 - 较少使用,因为大部分directive是处理dom元素的行为绑定,而不是改变它们
link
function link(scope, element, attrs, controller) { ... }
- 在link阶段要执行的函数,这个属性只有当compile属性没有设置时才生效
- 常用参数为
scope
,element
和attrs
,分别是当前元素所在的scope,dom元素和元素上的属性们,其它的以后细说 - directive基本上都会有此函数,可以注册事件,并与scope相绑
compile
和link
的使用时机
compile
- 想在dom渲染前对它进行变形,并且不需要scope参数
- 想在所有相同directive里共享某些方法,这时应该定义在compile里,性能会比较好
- 返回值就是link的function,这时就是共同使用的时候
link
- 对特定的元素注册事件
- 需要用到scope参数来实现dom元素的一些行为
AngularJS的指令(Directive) compile和link的区别及使用示例的更多相关文章
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- Angularjs Directive - Compile vs. Link
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 hellobug 失去 ...
- angular学习笔记(三十)-指令(7)-compile和link(3)
本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- AngularJS自定义指令directive:scope属性 (转载)
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- AngularJS之指令中controller与link(十二)
前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
随机推荐
- (原)Ubuntu16中使用nvidia官方提供的驱动,而非自带的驱动
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5638185.html 安装完ubuntu16后,显卡显示的是Gallium... 在“设置-软件和更新 ...
- 监听SWT文本框只能输入数字
在SWT开发中,很多时候需要文本框只能输入数字(当输入字母或者其他字符时为无效),这个时候需要给文本框设置监听VerifyListener, code 如下: text.addVerifyListen ...
- < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的作用
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 介绍:这 ...
- web.xml中配置log4j
1.将 commons-logging.jar和 log4j.jar加入你的项目中:2.在src/下创建log4j.properties|log4j.xml文件:3.在web.xml中配置log4j的 ...
- Randomized QuickSelect
In this blog, we give a solution for Quick Select. Here, we have an improvement. The idea is to rand ...
- 2.8 Classes of Restricted Estimators
根据所加限制的不同,可以将模型分为以下几类 RSS+Roughness penalty $PRSS(f;\lambda)=RSS(f)+\lambda J(f)$ 其中$J(f)$为对函数$f$的pe ...
- Mod_Python中文文档
Mod_Python中文文档 mod_python中文文档
- 蚂蚁的难题(二)首尾相连数组的最大子数组和(DP)
蚂蚁的难题(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种食材 ...
- Android漫游记(1)---内存映射镜像(memory maps)
Android系统内核基于Linux2.6+内核,因此,其在进程内存管理方面的非常多机制和Linux是非常相像的.首先,让我们来看一个典型的Android进程的内存镜像(App进程和Native本地进 ...
- Android应用程序窗口(Activity)的绘图表面(Surface)的创建过程分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8303098 在前文中,我们分析了应用程序窗口连 ...