什么时候在角度中使用包括“真”和包括“元素”？

我什么时候应该使用 transclude: 'true'和 transclude: 'element'？ 我找不到任何关于 transclude: 'element'的角度文档，他们是相当混乱。

如果有人能用简单的语言解释一下，我会很高兴的。 每种选择的好处是什么? 它们之间的真正区别是什么？

以下是我的发现:

transclude: true

在编译函数内部，您可以借助于隐藏链接函数来操作 DOM，或者您可以在任何 HTML 标记上使用 ngTranscluse 指令将隐藏的 DOM 插入到模板中。

还有

transclude: ‘element’

这包含了整个元素，并且在编译函数中引入了一个包含链接的函数。您无法访问此处的范围，因为范围尚未创建。Compile 函数为指令创建一个链接函数，该函数可以访问 scope，transcludeFn 允许您接触 DOM 操作的克隆元素(已经被隔离) ，或者使用绑定到 DOM 中的 scope 的数据。对于您的信息，这是在 ng- 重复和 ng- 开关中使用的。

84440 次浏览
小开

如果设置为 true，则 指令将删除原始内容，但使其可用于重新插入 你的模板通过一个叫做 n- 转移的指令。

appModule.directive('directiveName', function() {
return {
template: '<div>Hello there <span ng-transclude></span></div>',
transclude: true
};
});




<div directive-name>world</div>

浏览器呈现: “ Hello there world。”

小开
最佳答案

来自 AngularJS 指令文件:

transclude-编译元素的内容并使其对指令可用。通常与 ngTranscluse 一起使用。超越的优点是连接函数接收到一个预先约束到正确范围的超越函数。在典型的设置中，小部件创建一个隔离作用域，但是转换不是子作用域，而是隔离作用域的兄弟作用域。这使得小部件可以具有私有状态，并且可以将转换绑定到父(预先隔离)作用域。

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的 内容(子代)也就是 <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指令来完成此任务。

小开

最好的思考方式是画框，画框有自己的设计和加入画面的空间，我们可以决定把什么画面放进去。enter image description here

当涉及到角度，我们有一些控制器的范围和内部，我们将放置一个指令，支持跃迁。这个指令将有它自己的显示和功能。在非翻译指令中，指令中的内容是由指令本身决定的，但是通过翻译，就像一个画框一样，我们可以决定指令中的内容。

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>

例子


提交答案