什么是angularjs主要使用transclusion的 [英] What is the main use of transclusion in angularjs

问题描述

我在最近的指令遇到transclusion，什么是有这个概念的目的。据我所知，它的一个对象的封装，并有2路可能结合。但是，这可以通过在指令范围内使用属性=是可能的。有啥大不了的有关指令？

I have recently come across transclusion in directives, what is the purpose of having this concept. As far as I know its encapsulation of an object and have 2-way binding possibly. But this can be possible by using '=' in the scope attribute in directive. So whats the big deal about directive?

推荐答案

• 要创建一个包装其他元素的指令。


• 要多次复制相同transcluded内容。


• 要重新克隆trancluded内容在事件发生时。

• 当使用 transclude 选项，元素内容正在从在编译阶段的DOM中删除。


• 在链接阶段（或$ transclude指令控制器内部的）是一个 $ transclude功能<第五届参数/ code>，它允许你克隆transcluded内容，它适用于范围并将其重新当你需要的DOM。


• Angular.js有简单的情况下，一个内置的指令： ngTransclude

• When using the transclude option, the element contents are being removed from the DOM during the compile phase.
• The 5th argument of the linking phase ( or $transclude inside directive controllers ) is a $transclude function which allows you to clone the transcluded contents , apply it to a scope and reinsert it to the DOM when you need.
• Angular.js has a built-in directive for simple cases: ngTransclude

• Angular.js - Transclusion基础


• Angular.js - 组件和容器

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

• ngIf


• ngInclude


• ngRepeat


• ngSwitch

• ngIf
• ngInclude
• ngRepeat
• ngSwitch

这是什么 transclude 选项吗？它使一个指令，使用此选项的内容有指令的外部，而不是内部访问范围。

What does transclude option do? it makes the contents of a directive with this option have access to the scope outside of the directive rather than inside.

其实，这就是不是那么准确，它仅适用于angular.js内置指令，当没有范围参数调用$ transclude功能的默认行为的默认行为。

Actually, that's not so accurate, it applies only to the default behavior of angular.js built-in directives and the default behavior of the $transclude function when invoked without scope argument.

在$ transclude功能允许你申请你需要作为一个可选的第一个参数的范围：

The $transclude function allows you to apply any scope you need as an optional first argument:

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);
      })
    }
  }
})

这篇关于什么是angularjs主要使用transclusion的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！