Page 105 - AngularJS权威教程
P. 105
10.3 绑定策略 85
4. $transclude 1
嵌入链接函数会与对应的嵌入作用域进行预绑定。
transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。 2
在控制器内部操作DOM是和AngularJS风格相悖的做法,但通过链接函数就可以 3
实现这个需求。仅在compile参数中使用transcludeFn是推荐的做法。
例如,我们想要通过指令来添加一个超链接标签。可以在控制器内的$transclude函数中实 4
现,如下所示:
5
angular.module('myApp')
.directive('link', function() {
return {
restrict: 'EA', 6
transclude: true,
controller:
function($scope, $element, $transclude, $log) { 7
$transclude(function(clone) {
var a = angular.element('<a>');
a.attr('href', clone.text());
a.text(clone.text()); 8
$log.info("Created new a tag in link directive");
$element.append(a);
}); 9
}
};
});
10
指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但
链接函数只能在当前内部指令中定义行为,且无法在指令间复用。
11
link函数可以将指令互相隔离开来,而controller则定义可复用的行为。
12
由于指令可以require其他指令所使用的控制器,因此控制器常被用来放置在多个指令间共
享的动作。 13
如果我们希望将当前指令的API暴露给其他指令使用,可以使用controller参数,否则可以
使用link来构造当前指令元素的功能性。如果我们使用了scope.$watch()或者想要与DOM元素 14
做实时的交互,使用链接会是更好的选择。
技术上讲,$scope会在DOM元素被实际渲染之前传入到控制器中。在某些情况下,例如使 15
用了嵌入,控制器中的作用域所反映的作用域可能与我们所期望的不一样,这种情况下, $scope
对象无法保证可以被正常更新。 16
当想要同当前屏幕上的作用域交互时,可以使用被传入到link函数中的scope 17
参数。
18