Directive - Compile vs. Link

还是先从栗子们看起~

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

输入hellobug

失去焦点后提示hellobug这个用户名已经存在

代码如下：

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的定义

6 7 8 9 10 11 12 13 14 15 16 17 18

app@H_301_137@.controller@H_301_137@('MainCtrl'@H_301_137@, function@H_301_137@($scope@H_301_137@) @H_301_137@{  $scope@H_301_137@.checkUsername = function@H_301_137@() @H_301_137@{  //send ajax to check on server  if @H_301_137@(username === 'hellobug'@H_301_137@) @H_301_137@{  usernameAlreadyExist = true@H_301_137@;  @H_301_137@}  @H_301_137@} @H_301_137@});  directive@H_301_137@('ngBlur'@H_301_137@,0)!important">$document@H_301_137@) @H_301_137@{  return @H_301_137@{  link: scope@H_301_137@, element@H_301_137@,0)!important">attrs@H_301_137@) @H_301_137@{  $@H_301_137@(element@H_301_137@).bind@H_301_137@('blur'@H_301_137@,0)!important">e@H_301_137@){  scope@H_301_137@.$apply@H_301_137@(attrs@H_301_137@.ngBlur@H_301_137@);  @H_301_137@});  @H_301_137@}  @H_301_137@} @H_301_137@})

在上面的例子里，directive返回对象里定义的link方法在blur事件触发时执行了scope上的checkUsername()方法。

如果是只有link方法，也可以简单的写成下面这种形式~直接返回link对应的function~

directive的简单写法

return ngBlur@H_301_137@);  @H_301_137@});  @H_301_137@}; @H_301_137@})

再来这样一个功能，我想让内容为哈哈哈哈的dom元素重复n遍，n是自定义的，以达到某种满屏大笑丧心病狂的效果 -_-，我知道ng-repeat就已经能干这事儿了，但是如果自己实现一下呢~

HTML

<ul repeater="20"<li>哈哈哈哈</li> </ul>

directive的定义

'repeater'@H_301_137@,0)!important">restrict: 'A'@H_301_137@,  compile: attrs@H_301_137@) @H_301_137@{  var template = children@H_301_137@().clone@H_301_137@();  for@H_301_137@(i=0@H_301_137@; i<repeater - 1@H_301_137@; i++@H_301_137@) @H_301_137@{  append@H_301_137@(template@H_301_137@.clone@H_301_137@());  @H_301_137@}  @H_301_137@}  @H_301_137@} @H_301_137@});

在上面例子的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

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

link的使用时机

想在dom渲染前对它进行变形，并且不需要scope参数

想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好

返回值就是link的function，这时就是共同使用的时候

对特定的元素注册事件

需要用到scope参数来实现dom元素的一些行为

最后~

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

原文地址

原文链接：https://www.f2er.com/angularjs/149607.html