$compile 和$link

最新推荐文章于 2023-10-16 22:23:48 发布

转载最新推荐文章于 2023-10-16 22:23:48 发布 · 1.1k 阅读

本文深入探讨AngularJS中$compile服务的功能及其生成的link函数如何在编译过程中被调用。解释了link函数如何操作DOM以及如何正确地使用cloneAttachFn参数来复制并附加元素。

实际上link其实是由$compile生成的函数，而且这个函数在生成的时候内容已经定好了，所以在调用link函数的时候只是传对应的scope参数给这些由$compile编译好的link函数，所以如果想通过cloneAttachFn这个传入link的回调函数来修改dom结构是不行的。

$compile 最基本的使用方式：

var link = $compile('<p>{{ text }}</p>');
var node = link($scope);
console.log(node);

上面的 $compile 和 link 调用时都有额外参数来实现其它功能。先看 link 函数，它形如：

function(scope[, cloneAttachFn]

第二个参数 cloneAttachFn 的作用是，表明是否复制原始节点，及对复制节点需要做的处理，下面这个例子说明了它的作用：

<div ng-controller="TestCtrl"></div>
<div id="a">A {{ text }}</div>
<div id="b">B </div>

app.controller('TestCtrl', function($scope, $compile){
  var link = $compile($('#a'));

  //true参数表示新建一个完全隔离的scope,而不是继承的child scope
  var scope = $scope.$new(true);
  scope.text = '12345';

  //var node = link(scope, function(){});
  var node = link(scope);

  $('#b').append(node);
});

cloneAttachFn 对节点的处理是有限制的，你可以添加 class ，但是不能做与数据绑定有关的其它修改（修改了也无效）：

app.controller('TestCtrl', function($scope, $compile){
  var link = $compile($('#a'));
  var scope = $scope.$new(true);
  scope.text = '12345';

  var node = link(scope, function(clone_element, scope){
    clone_element.text(clone_element.text() + ' ...'); //无效
    clone_element.text('{{ text2 }}'); //无效
    clone_element.addClass('new_class');
  });

  $('#b').append(node);
});

修改无效的原因是，像 {{ text }} 这种所谓的 Interpolate 在 $compile 中已经被处理过了，生成了相关函数（这里起作用的是 directive 中的一个 postLink 函数），后面执行 link 就是执行了$compile 生成的这些函数。当然，如果你的文本没有数据变量的引用，那修改是会有效果的。

前面在说自定义指令时说过， link 函数是由 compile 函数返回的，也就像前面说的，应该把改变 DOM 结构的逻辑放在 compile 函数中做。