179

我应该什么时候使用transclude: 'true'，什么时候使用transclude: 'element'？我在角度文档中找不到任何内容transclude: 'element'，它们非常令人困惑。

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

这就是我发现的：

transclude: true

在 compile 函数中，您可以借助 transclude 链接函数来操作 DOM，或者您可以使用任何 HTML 标签上的 ngTransclude 指令将 transcluded DOM 插入到模板中。

和

transclude: ‘element’

这包含了整个元素，并在编译函数中引入了一个transclude链接函数。您无法在此处访问范围，因为尚未创建范围。Compile 函数为可以访问范围的指令创建一个链接函数，而 transcludeFn 允许您触摸克隆的元素（已被嵌入）以进行 DOM 操作或使用绑定到其中的范围的数据。供您参考，这用于 ng-repeat 和 ng-switch。

4

3 回答 3

230

来自关于指令的 AngularJS 文档：

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被<span>{{ something }}</span> {{...嵌入并可用于指令。

嵌入：'元素'

如果您有一个名为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

于 2013-08-27T05:01:55.840 回答
33

当设置为 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。”</p>

于 2013-08-26T17:47:55.890 回答
8

考虑嵌入的最佳方式是相框。相框有自己的设计和添加图片的空间。我们可以决定将什么图片放入其中。在此处输入图像描述

当涉及到角度时，我们有某种控制器及其范围，在其中我们将放置一个支持嵌入的指令。该指令将有它自己的显示和功能。在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>

例子

于 2016-08-30T20:59:13.187 回答