Directive - Compile vs. Link

还是先从栗子们看起~

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

输入 hellobug 失去焦点后提示 hellobug 这个用户名已经存在代码如下：

<body ng-controller="MainCtrl">
  <lable>用户名:
    <input type="text" ng-model="username" ng-blur="checkUsername()" />
    <span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span>
  </lable>
</body>

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 ~

app.directive('ngBlur', function($document) {
  return function(scope, element, attrs) {
    $(element).bind('blur', function(e){
       scope.$apply(attrs.ngBlur);
    });
  };
})

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

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

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 手下生效的说起吧~

编译三阶段：

标准浏览器API转化
将html转化成dom，所以自定义的html标签必须符合html的格式
Angular compile
搜索匹配directive，按照priority排序，并执行directive上的compile方法
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元素的一些行为

Previous使用Angularjs的ng-cloak指令避免页面乱码 NextNodeJS

Last updated 5 years ago

Was this helpful?

<body ng-controller="MainCtrl"> <lable>用户名: <input type="text" ng-model="username" ng-blur="checkUsername()" /> <span style="color:red;" ng-show="usernameAlreadyExist">用户名已经存在</span> </lable> </body>

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); }); } } })

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 和 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元素的一些行为

转自：