angularjs – 何时使用transclude’true’并在Angular中转换’element’?

前端之家收集整理的这篇文章主要介绍了angularjs – 何时使用transclude’true’并在Angular中转换’element’?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
什么时候我应该使用transclude:’true’和transclude:’element’?
我无法找到关于transclude的任何内容:角度文档中的’element’,它们非常令人困惑.

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

这是我发现的:

06000

Inside a compile function,you can manipulate the DOM with the help of transclude linking function or you can insert the transcluded DOM into the template using ngTransclude directive on any HTML tag.

06001

This transcludes the entire element and a transclude linking function is introduced in the compile function. You can not have access to scope here because the scope is not yet created. Compile function creates a link function for the directive which has access to scope and transcludeFn lets you touch the cloned element (which was transcluded) for DOM manipulation or make use of data bound to scope in it. For your information,this is used in ng-repeat and ng-switch.

AngularJS Documentation on Directives开始:

transclude – compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope,but the transclusion is not a child,but a sibling of the isolate scope. This makes it possible for the widget to have private state,and the transclusion to be bound to the parent (pre-isolate) scope.

true – transclude the content of the directive.

'element' – transclude the whole element including any directives defined at lower priority.

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’声明,如下所示:

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

编译之后和链接之前,这变为:

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

在这里,整个元素包括其子元素被转换并可用于指令.

链接后会发生什么?

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

猜你在找的Angularjs相关文章