何时在 Angular 中使用 transclude 'true' 和 transclude 'element'？
我应该何时使用 transclude: 'true' 以及何时使用 transclude: 'element' ？我在角度文档中找不到关于 transclude: 'element' 的任何内容，它们非常令人困惑。
如果有人能用简单的语言解释这一点，我会很高兴。每个选项的好处是什么？它们之间的真正区别是什么？
这就是我发现的：
transclude: true 在编译函数中，您可以借助 transclude 链接函数来操作 DOM，或者您可以在任何 HTML 标签上使用 ngTransclude 指令将已转换的 DOM 插入到模板中。
和
transclude: 'element' 包含整个元素，并在编译函数中引入了一个transclude链接函数。您无法在此处访问范围，因为尚未创建范围。 Compile 函数为可以访问范围的指令创建一个链接函数，而 transcludeFn 允许您触摸克隆的元素（已被嵌入）以进行 DOM 操作或使用绑定到其中的范围的数据。供您参考，这用于 ng-repeat 和 ng-switch。
从 AngularJS Documentation on Directives：
transclude - 编译元素的内容并使其可用于指令。通常与 ngTransclude 一起使用。嵌入的优点是链接函数接收一个预先绑定到正确范围的嵌入函数。在典型的设置中，小部件创建了一个隔离范围，但嵌入不是子范围，而是隔离范围的兄弟。这使得小部件可以拥有私有状态，并且嵌入可以绑定到父（预隔离）范围。 true - 嵌入指令的内容。 'element' - 包含整个元素，包括以较低优先级定义的任何指令。
嵌入：真
因此，假设您有一个使用 transclude: true 声明的名为 my-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: 'element' 声明的名为 my-transclude-element 的指令，如下所示：
<div>
<my-transclude-element>
<span>{{ something }}</span>
{{ otherThing }}
</my-transclude-element>
</div>
编译后和链接之前，这变成：
<div>
<!-- transcluded -->
</div>
在这里，包括其子元素在内的整个元素都被嵌入并可供指令使用。
链接后会发生什么？
这取决于您的指令来执行它需要对 transclude 函数执行的操作。 ngRepeat 使用 transclude: 'element' 以便在范围更改时可以重复整个元素及其子元素。但是，如果您只需要替换标记并希望保留其内容，则可以将 transclude: true 与 ngTransclude 指令一起使用，该指令会为您完成此操作。
当设置为 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 之间的区别）
https://i.stack.imgur.com/4xZv8.png
当涉及到角度时，我们有某种控制器及其范围，在其中我们将放置一个支持嵌入的指令。该指令将有它自己的显示和功能。在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>
关注公众号
不定期副业成功案例分享
made available to the directive声明。该元素始终可用于指令。你能详细说明一下吗？