首页 文章

何时使用transclude 'true'并在Angular中转换'element'？

提问于
浏览 次
172

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

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

这是我发现的：

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

和

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

angularjs angularjs-directive angularjs-ng-transclude

3 回答

  • 32

    来自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 的 content （子） <span>{{ something }}</span> {{... ，被转换并可用于指令 .

    transclude：'element'

    如果你有一个名为 my-transclude-element 的指令，使用 transclude: 'element' 声明，如下所示：

    <div>
  <my-transclude-element>
    <span>{{ something }}</span>
    {{ otherThing }}
  </my-transclude-element>
</div>

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

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

    这里， whole element including its children 被转换并可用于指令 .

    链接后会发生什么？

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

    回复于
  • 7

    设置为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 . ”

    回复于
  • 226

    考虑换帧的最佳方式是画框 . 画框有自己的设计和添加画面的空间 . 我们可以决定画面里面会有什么画面 .
    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


    }

});

    Content inside the directive

    <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>

    Call Directive

    <body ng-controller="appController">
    <my-frame>
      <span>My Frame content</span>
    </my-frame>
  </body>

    Example

    回复于

相关问题