gpt4 book ai didi

angularjs - 何时使用 Angular 嵌入

转载 作者:行者123 更新时间:2023-12-01 10:36:12 24 4
gpt4 key购买 nike

我正在阅读此页面中的一些示例的 Angular 嵌入:http://www.c-sharpcorner.com/UploadFile/17e8f6/transclusion-in-custom-angularjs-directive/

该页面提供了有用的示例。但是我想知道何时使用嵌入。原始示例:

<user-post user-name="{{user.Name}}" post-details="post" ng-repeat="post in user.Posts">
<user-likes post-likes-count="{{post.Likes.length}}"></user-likes>
</user-post>

这是 userPost 指令的 HTML 模板:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h5><strong>{{userName}}</strong></h5>
</div>
<div class="panel-body">
<img ng-src="{{postDetails.Content}}" alt="Image" class="img-responsive" />
</div>
<div class="panel-footer" ng-transclude>
</div>
</div>

但我可以在不包含的情况下重写它:
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h5><strong>{{userName}}</strong></h5>
</div>
<div class="panel-body">
<img ng-src="{{postDetails.Content}}" alt="Image" class="img-responsive" />
</div>
<div class="panel-footer">
<user-likes post-likes-count="{{likeCount}}"></user-likes>
</div>
</div>

我想知道使用嵌入的最佳情况?

最佳答案

要了解 Transclusion,以及何时/如何使用它,您必须了解一些关于您尝试表示的 DOM 以及 Angular 指令如何在 DOM 中发挥作用的知识。

具体来说,这与元素指令( restrict: 'E' )有关。让我们将最基本的 HTML 用于我们可能采用的指令:

.directive('myDirective', function(){
return {
restrict: 'E',
template: '<div></div>' +
'<div></div>'
};

用法:
<my-directive>Some Content</my-directive>

现在,这是 的问题。关键 理解嵌入:

Some Content 在哪里结果?

在这种情况下, Some Content无处可去。当指令被注入(inject)到 DOM 中时,它被 template 替换。 .模板不知道 Some Content , 并且没有地方放,因此不会在最终的 DOM 中输出。

现在,添加嵌入,我们可以解决这个问题。
.directive('myDirective', function(){
return {
restrict: 'E',
transclude: true,
template: '<div></div>' +
'<ng-transclude></ng-transclude>'
};

现在,当 DOM 被编译时, Some Content有地方可去。嵌入允许将元素的内部内容放置在模板中,在 ng-transclude 的位置。指令存在。

现在,嵌入可能会变得非常棘手,尤其是当您有一个指令嵌套在另一个指令的内部内容中时,但它可能非常强大。但是,如果您的指令在标记中的元素内没有内容,则不需要嵌入。有很多方法可以利用嵌入,但在它们的核心,它们最终都回到了这个概念。

关于angularjs - 何时使用 Angular 嵌入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34985730/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com