Angularjs Directive - Compile vs. Link
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应。
输入 hellobug
失去焦点后提示 hellobug 这个用户名已经存在
代码如下:
1)
<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);
});
};
})
2)也可用$parse服务
app.directive('focusDir',[ "$timeout","$parse" ,function($timeout,$parse) {
return {
link: function($scope, element, attrs) {
var model = $parse(attrs.focusDir);
$scope.$watch(model, function(value) {
// console.log('value=',value);
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// to address @blesh's comment, set attribute value to 'false'
// on blur event:
element.bind('blur', function() {
// console.log('blur');
$scope.$apply(model.assign($scope, false));
});
}
};
}] );
//Tip:记得 引入"$timeout","$parse"
再来这样一个功能,我想让内容为哈哈哈哈
的dom元素重复n遍,n是自定义的,以达到某种满屏大笑丧心病狂的效果 -_-,我知道ng-repeat
就已经能干这事儿了,但是如果自己实现一下呢~
<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元素的一些行为
最后~
本节目所用示例可以猛戳这里查看ho~
Angularjs Directive - Compile vs. Link的更多相关文章
- AngularJS的指令(Directive) compile和link的区别及使用示例
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...
- angularjs指令中的compile与link函数详解(转)
http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...
- Directive Controller And Link Timing In AngularJS
I've talked about the timing of directives in AngularJS a few times before. But, it's a rather compl ...
- angularJS directive详解
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- AngularJS Directive 学习笔记
指令 Directive 指令要点 大漠老师的教学节点 解析最简单的指令 hello: 匹配模式 restrict 解析最简单的指令 hello: template.tempmlateUrl.$tem ...
随机推荐
- Linux下查找命令(收集整理)
原文:http://blog.csdn.net/sunstars2009918/article/details/8510878 一.Linux查找文件的相关命令 常 用 命 令 简要中文说明 程序所在 ...
- Android 新浪博客分享问题总结
分类: android(33) 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 我遇到BUG 1 sso package or singn error Bug2 ...
- Git分支模型
转自:http://www.cnblogs.com/byeyear/archive/2012/11/28/2793374.html 本文介绍一种使用Git进行源代码管理的分支模型,着重于如何使用Git ...
- matlab 人面检测
Create a detector object. faceDetector = vision.CascadeObjectDetector;Read input image. I = imread(' ...
- jetty7.6运行struts2项目问题解决
运行struts2项目报错:报错1:11:56:51,400 WARN Dispatcher:68 - Could not find action or result: /credit_public ...
- 2017年USNews美国大学研究生专业排名
2017年USNEWS美国大学研究生专业排名最佳商学院排名 排名 学校 费用 注册人数 #1 Harvard University Boston, MA $61,225 per year (full- ...
- SDUT2013级測试赛_D
题目描写叙述 给出一棵含有n个点的树.每一个点权值为wi.求从根节点到叶子结点权值和最大的那条路经的权值和是多少. 输入 n(1<= n && n <= 10000). 接 ...
- 设备树(Device Tree)
设备树介绍: 设备树是一个描述设备硬件资源的文件,该文件是由节点组成的树形结构.如下: / { node1 { a-string-property = "A string"; a- ...
- HDFS的常用操作
本文地址:http://www.cnblogs.com/archimedes/p/hdfs-operations.html,转载请注明源地址. 1.HDFS文件的权限以及读写操作 HDFS文件的权限: ...
- 用thinkphp操作session
写了一段代码,对session进行一些常用的操作: <?php namespace Home\Controller; use Think\Controller; class Demo1Contr ...