我最近在指令中遇到了嵌入,有这个概念的目的是什么。据我所知,它封装了一个对象,并且可能有 2 路绑定。但这可以通过在指令的范围属性中使用“=”来实现。那么指令有什么大不了的呢?
问问题
920 次
2 回答
5
Transclude 允许:
- 创建包装其他元素的指令。
- 多次克隆相同的嵌入内容。
- 事件发生时重新克隆转换后的内容。
ngTransclude 和 $transclude
- 使用transclude选项时,元素内容在编译阶段从 DOM 中删除。
linking phase
(或指令控制器中的 $transclude)的第 5 个参数是$transclude function
允许您克隆转入的内容,将其应用于范围并在需要时将其重新插入 DOM。- Angular.js 有一个用于简单情况的内置指令:ngTransclude
我推荐这些教程:
一些角度内置指令(ng module)使用以下transclude
选项:
在文档中
嵌入选项有什么作用?它使带有此选项的指令的内容可以访问指令外部而不是内部的范围。
实际上,这不是那么准确,它仅适用于 angular.js 内置指令的默认行为和 $transclude 函数在没有范围参数的情况下调用时的默认行为。
$transclude 函数允许您应用所需的任何范围作为可选的第一个参数:
app.directive('example',function(){
return {
transclude: true,
template: "<div>example</div>"
link: function (scope, element, attrs, ctrl, $transclude){
$transclude(scope, function(clone){
element.append(clone);
})
}
}
})
于 2014-01-13T10:25:20.353 回答
1
我的主要用途是将指令的内部内容重新定位到指令ngTransclude
模板内的任何位置。
http://plnkr.co/edit/aQ7SG58g0njSerM8FsNz?p=preview
var app = angular.module('myApp', []);
app.directive('wrapMe', [function () {
return {
restrict: 'E',
transclude: true,
template: '<span>Stuff before [<b ng-transclude></b>] Stuff after</span>'
};
}]);
于 2014-01-13T10:49:03.413 回答