加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS:何时使用transclude’true’和transclude’element’

发布时间:2020-12-17 09:21:26 所属栏目:安全 来源:网络整理
导读:什么时候应该使用transclude:’true’和transclude:’element’? 我不能找到任何关于transclude:’元素’在角度文档,他们是很混乱。 我会很高兴,如果有人能用简单的语言解释这一点。 每个选项的好处是什么?它们之间的真正区别是什么? 这是我发现: 0
什么时候应该使用transclude:’true’和transclude:’element’?
我不能找到任何关于transclude:’元素’在角度文档,他们是很混乱。

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

这是我发现:

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的内容(children)是< 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>

这里,包括其子代的整个元素被转换并且可用于指令。

链接后会发生什么?

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读