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