angularjs - 何时使用 Angular 嵌入

Question

我正在阅读此页面中的一些示例的 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>

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

Answer 1

要了解 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 的位置。指令存在。

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