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

Question

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

Answer 1

Transclude允许:

• 创建包含其他元素的指令.
• 要多次克隆相同的已转换内容.
• 在事件发生时重新克隆已转换的内容.

ngTransclude和$ transclude

• 使用transclude选项时,在编译阶段将从DOM中删除元素内容.
• linking phase(或$ transclude inside指令控制器)的第5个参数$transclude function允许您克隆已转换的内容,将其应用于作用域并在需要时将其重新插入DOM.
• Angular.js有一个简单案例的内置指令:ngTransclude

我推荐这些教程:

• Angular.js - 翻译基础知识
• Angular.js - 组件和容器

一些角度内置指令(ng模块)使用transclude选项:

• ngIf
• ngInclude
• ngRepeat
• ngSwitch

在文档中

是什么transclude选项吗？它使得带有此选项的指令的内容可以访问指令之外的范围而不是内部.

实际上,这不是那么准确,它仅适用于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);
      })
    }
  }
})