Question

我应该何时使用transclude: 'true'和何时transclude: 'element'？我无法在角度文档中找到关于transclude: 'element'的任何内容，它们非常令人困惑。

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

这是我发现的：

transclude: true
在编译函数中，您可以在transclude链接函数的帮助下操作DOM，或者您可以使用任何HTML标记上的ngTransclude指令将已转换的DOM插入到模板中。

和

transclude: ‘element’
这将转换整个元素，并在compile函数中引入了transclude链接函数。您无法访问此范围，因为尚未创建范围。编译函数为有权访问范围的指令创建链接函数，transcludeFn允许您触摸克隆元素（已被转换）以进行DOM操作或使用绑定到范围内的数据。为了您的信息，这用于ng-repeat和ng-switch。

Answer 1

来自AngularJS Documentation on Directives：

transclude - 编译元素的内容并使其可用于指令。通常与ngTransclude一起使用。翻译的优点是链接功能接收预先绑定到正确范围的翻译功能。在典型的设置中，窗口小部件创建隔离范围，但是转换不是子项，而是隔离范围的兄弟。这使得窗口小部件可以具有私有状态，并且将转换绑定到父（预隔离）范围。


true - 转换指令的内容。

'element' - 转换整个元素，包括以较低优先级定义的任何指令。

transclude：true

因此，假设您有一个名为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'

如果您有一个名为transclude: 'element'的指令，其<div> <my-transclude-element> <span>{{ something }}</span> {{ otherThing }} </my-transclude-element> </div>声明如下：

<div>
   <!-- transcluded -->
</div>

编译之后和链接之前，这变为：

ngRepeat

此处，整个元素（包括其子元素）将被转义并可供指令使用。

链接后会发生什么？

这取决于您的指令，以执行transclude函数所需的操作。 transclude: 'element'使用transclude: true，以便在范围更改时它可以重复整个元素及其子元素。但是，如果您只需要替换标记并希望保留其内容，则可以使用ngTransclude和{{1}}指令来为您执行此操作。

Answer 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。”

Answer 3

考虑换帧的最佳方式是画框。画框有自己的设计和添加画面的空间。我们可以决定画面里面会有什么画面。

当涉及到角度时，我们有一些控制器及其范围，我们将在其中放置一个支持转换的指令。该指令将拥有自己的显示和功能。在非转换指令中，指令内部的内容由指令本身决定，但是通过转换，就像图片框架一样，我们可以决定指令内部的内容。

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'true'并在Angular中转换'element'？

3 个答案:

transclude：true

transclude：'element'

链接后会发生什么？