$compile 和$link

来源：互联网发布：什么是碎片化阅读知乎编辑：程序博客网时间：2024/04/29 07:06

实际上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 函数中做。

0 0