如果我想实现这样一个功能,当一个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

compilelink的形式

compile

  • function compile(element, attrs, transclude) { ... }
  • 在compile阶段要执行的函数,返回的function就是link时要执行的function
  • 常用参数为elementattrs,分别是dom元素和元素上的属性们,其它的以后细说
  • 较少使用,因为大部分directive是处理dom元素的行为绑定,而不是改变它们

link

  • function link(scope, element, attrs, controller) { ... }
  • 在link阶段要执行的函数,这个属性只有当compile属性没有设置时才生效
  • 常用参数为scopeelementattrs,分别是当前元素所在的scope,dom元素和元素上的属性们,其它的以后细说
  • directive基本上都会有此函数,可以注册事件,并与scope相绑

compilelink的使用时机

compile

  • 想在dom渲染前对它进行变形,并且不需要scope参数
  • 想在所有相同directive里共享某些方法,这时应该定义在compile里,性能会比较好
  • 返回值就是link的function,这时就是共同使用的时候

link

  • 对特定的元素注册事件
  • 需要用到scope参数来实现dom元素的一些行为

最后~

本节目所用示例可以猛戳这里查看ho~

Angularjs Directive - Compile vs. Link的更多相关文章

  1. AngularJS的指令(Directive) compile和link的区别及使用示例

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...

  2. angularjs指令中的compile与link函数详解(转)

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  3. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  4. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  5. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  6. 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 ...

  7. angularJS directive详解

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...

  8. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  9. AngularJS Directive 学习笔记

    指令 Directive 指令要点 大漠老师的教学节点 解析最简单的指令 hello: 匹配模式 restrict 解析最简单的指令 hello: template.tempmlateUrl.$tem ...

随机推荐

  1. Android支付接入之Google In-app-Billing

    原文链接:http://www.mobile-open.com/2016/966337.html 因为公司需要接入Google的应用内支付(即Google的in-app Billing V3),接入过 ...

  2. Arcgis10.2中复制后粘贴图标是灰色的,无法粘贴,编辑也打开了,如何解决?

    在进程中选择SogouCloud,然后结束进程 关闭sogoucloud.exe进程试试,修改搜狗输入法设置\高级\云计算候选功能,

  3. DCI:The DCI Architecture: A New Vision of Object-Oriented Programming

    SummaryObject-oriented programming was supposed to unify the perspectives of the programmer and the ...

  4. Visual Studio 2013 新增web项目IIS Express的64位版

    使用Visual Studio 2012开发SharePoint的应该都遇到过下面的错误“SharePoint 在32位进程中不受支持”,而怎么修改目标平台都不好使,因为VS 2012所配备的IIS ...

  5. [翻译] TSActivityIndicatorView 自定义指示器

    TSActivityIndicatorView 自定义指示器 https://github.com/tomkowz/TSActivityIndicatorView TSActivityIndicato ...

  6. PTC点击网赚入门

    第一次接触PTC大概是11月19号左右,那时候第一感觉是"这不就是传销吗,肯定是骗人的",但是由于利润十分之大,又忍不住仔细研究了一下,我还是十分还是十分谨慎的,再加上程序员的头脑 ...

  7. AndroidStudio如何引入so包

    转自:http://blog.csdn.net/aplixy/article/details/51592035 先说前提条件,我的AndroidStudio版本是2.2 Preview 3,版本是2. ...

  8. ZentaoPMS 系统的优先级以及修改

    王颖2015/10/08 最新版本中,严重程度1.2.3.4分别代表什么意思?还有优先级中1.2.3.4分别代表什么意思? 回复 石洋洋2015/10/08 1 2 3 4 都代表不同的级别,一般是1 ...

  9. 再谈Cognos报表设计中的维度函数

    在报表设计的过程中,客户很多时候会想看同比.环比的数据,很多人会想到利用日期函数在数据库中处理好然后直接在报表拖出来使用,其实这样加大了数据库的压力,当然也是解决问题的一种思路.今天我们就来说一下如何 ...

  10. 【树莓派】Linux 系统级别代理配置

    在Windows下,通过代理服务器怎么去设置连接代理服务器,浏览器---->工具------>internet选项----->连接--->局域网设置------->勾选“ ...