在angularjs中，transclusion的主要用途是什么？

Question

我最近遇到了指令的转换，这个概念的目的是什么。据我所知，它封装了一个对象并且可能具有双向绑定。但是这可以通过在指令的scope属性中使用'='来实现。那么关于指令的重要性是什么呢？

Answer 1

Transclude允许：

• 创建包装其他元素的指令。
• 多次克隆相同的已转录内容。
• 在事件发生时重新克隆已删除的内容。

ngTransclude和$ transclude

• 使用 transclude 选项时，在编译阶段会从DOM中删除元素内容。
• linking phase（或$ transclude inside指令控制器）的第5个参数是$transclude function，它允许您克隆已转换的内容，将其应用于范围和在需要时将其重新插入DOM。
• Angular.js有一个针对简单案例的内置指令：ngTransclude

我推荐这些教程：

• Angular.js - Transclusion basics
• Angular.js - Components and containers

某些角度内置指令（ ng module ）使用transclude选项：

• ngIf
• ngInclude
• ngRepeat
• ngSwitch

在docs

中

  

转换选项有什么作用？它使得带有此选项的指令的内容可以访问指令之外的范围而不是内部。

实际上，不那么准确，它仅适用于angular.js内置指令的默认行为，以及在没有scope参数的情况下调用时$ transclude函数的默认行为。

$ transclude函数允许您将所需的任何范围应用为可选的第一个参数：

app.directive('example',function(){
  return {
    transclude: true,
    template: "<div>example</div>"
    link: function (scope, element, attrs, ctrl, $transclude){
      $transclude(scope, function(clone){
        element.append(clone);
      })
    }
  }
})

Answer 2

我的主要用途是将指令的内部内容重新定位到指令模板中ngTransclude的任何位置。

http://plnkr.co/edit/aQ7SG58g0njSerM8FsNz?p=preview

var app = angular.module('myApp', []);

app.directive('wrapMe', [function () {
  return {
    restrict: 'E',
    transclude: true,
    template: '<span>Stuff before [<b ng-transclude></b>] Stuff after</span>'
  };  
}]);