何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？
Posted
技术标签:
【中文标题】何时在 Angular 中使用 transclude \'true\' 和 transclude \'element\'？【英文标题】：When to use transclude 'true' and transclude 'element' in Angular?何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？ 【发布时间】：2013-08-29 06:34:57 【问题描述】：我应该何时使用 transclude: 'true' 以及何时使用 transclude: 'element' ？
我在 Angular 文档中找不到任何关于 transclude: 'element' 的信息，它们非常令人困惑。
如果有人能用简单的语言解释这一点，我会很高兴。 每个选项的好处是什么？它们之间的真正区别是什么？
这是我发现的：
transclude: true在 compile 函数中，您可以借助 transclude 链接函数来操作 DOM，或者您可以使用任何 html 标签上的 ngTransclude 指令将 transclude 的 DOM 插入到模板中。
和
transclude: ‘element’这对整个元素进行了transclude，并在compile函数中引入了transclude链接函数。您无法在此处访问范围，因为尚未创建范围。 Compile 函数为可以访问范围的指令创建一个链接函数，而 transcludeFn 允许您触摸克隆的元素（已被嵌入）以进行 DOM 操作或使用绑定到其中的范围的数据。供您参考，这用于 ng-repeat 和 ng-switch。
【问题讨论】：
【参考方案1】：来自AngularJS Documentation on Directives：
transclude- 编译元素的内容并使其可用于指令。通常与 ngTransclude 一起使用。嵌入的优点是链接函数接收一个预先绑定到正确范围的嵌入函数。在典型设置中，小部件会创建一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。这使得小部件可以拥有私有状态，并且嵌入可以绑定到父（预隔离）范围。
true- 嵌入指令的内容。
'element'- 包含整个元素，包括以较低优先级定义的任何指令。
嵌入：真
假设您有一个名为 my-transclude-true 的指令，用 transclude: true 声明，如下所示：
<div>
<my-transclude-true>
<span> something </span>
otherThing
</my-transclude-true>
</div>
编译后链接前变成：
<div>
<my-transclude-true>
<!-- transcluded -->
</my-transclude-true>
</div>
my-transclude-true 的 content（子级）是 <span> something </span> ...，被嵌入并可用于指令。
transclude: '元素'
如果您有一个名为 my-transclude-element 的指令用 transclude: 'element' 声明，如下所示：
<div>
<my-transclude-element>
<span> something </span>
otherThing
</my-transclude-element>
</div>
编译后链接前变成：
<div>
<!-- transcluded -->
</div>
在这里，包括其子元素在内的整个元素被嵌入并提供给指令。
链接后会发生什么？
这取决于您的指令来执行它需要使用 transclude 函数执行的操作。 ngRepeat 使用 transclude: 'element' 以便在范围更改时可以重复整个元素及其子元素。但是，如果您只需要替换标签并希望保留其内容，则可以使用 transclude: true 和 ngTransclude 指令，它会为您执行此操作。
【讨论】：
我有点错过made available to the directive 声明。该元素始终可用于指令。你能详细说明一下吗？
@guymograbi 这句话可能更有意义，因为“通过预先绑定到正确范围的函数提供给指令。”
如何单元测试一个包含等于“元素”的指令？我目前正在努力解决这个问题。嵌入后我似乎无法访问该元素。【参考方案2】：
当设置为 true 时， 指令将删除原始内容，但使其可用于重新插入 您的模板通过一个名为 ng-transclude 的指令。
appModule.directive('directiveName', function()
return
template: '<div>Hello there <span ng-transclude></span></div>',
transclude: true
;
);
<div directive-name>world</div>
浏览器渲染：“Hello there world。”
【讨论】：
这根本没有回答问题（这是关于transclude: true和transclude: element之间的区别）
另外有趣的是浏览器 DOM 在指令之后有什么标签，而不是它读取的内容......【参考方案3】：
考虑嵌入的最佳方式是相框。相框有自己的设计和添加图片的空间。我们可以决定将什么图片放入其中。
当涉及到 Angular 时，我们有某种控制器及其作用域，在其中我们将放置一个支持嵌入的指令。该指令将有它自己的显示和功能。在non-transluded指令中，指令内部的内容由指令本身决定，但是通过transclusion，就像一个相框，我们可以决定指令内部的内容。
angular.module("app").directive('myFrame', function ()
return
restrict: 'E',
templateUrl:"frame.html",
controller:function($scope)
$scope.hidden=false;
$scope.close=function()
$scope.hidden=true;
,
transclude:true
);
指令内的内容
<div class="well" style="width:350px;" ng-hide="hidden">
<div style="float:right;margin-top:-15px">
<i class="glyphicon glyphicon-remove" ng-click="close()" style="cursor:pointer"></i>
</div>
<div ng-transclude>
/*frame content goes here*/
</div>
</div>
调用指令
<body ng-controller="appController">
<my-frame>
<span>My Frame content</span>
</my-frame>
</body>
Example
【讨论】：
还是不懂transclude，请问有什么简单的程序可以说明一下吗？以上是关于何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？的主要内容，如果未能解决你的问题，请参考以下文章
[AngularJS] Angular 1.5 multiple transclude