更新的AngularJS 1.6.6 文档现在有更好的解释。
Transclude 用于创建包装其他元素的指令
有时希望能够传入整个模板而不是字符串或对象。假设我们要创建一个“对话框”组件。对话框应该能够包装任意内容。
为此,我们需要使用transclude选项。请参阅下面的示例。
脚本.js
angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function(scope) {
scope.name = 'Jeff';
}
};
});
索引.html
<div ng-controller="Controller">
<my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>
我的-dialog.html
<div class="alert" ng-transclude></div>
编译输出
<div ng-controller="Controller" class="ng-scope">
<my-dialog class="ng-isolate-scope"><div class="alert" ng-transclude="">Check out the contents, Tobias!</div></my-dialog>
</div>
Transclude 使带有此选项的指令的内容可以访问指令外部而不是内部的范围。
这在前面的示例中进行了说明。请注意,我们在 script.js 中添加了一个将 name 重新定义为 Jeff 的链接函数。通常,我们希望 {{name}} 是 Jeff。但是,我们在此示例中看到 {{name}} 绑定仍然是 Tobias。
最佳实践:仅transclude: true
在您要创建包装任意内容的指令时使用。