Angularjs 何时使用角度转换

我正在阅读本页的一些例子：

这一页提供了有用的例子。然而，我想知道什么时候使用转义。最初的例子是：

<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>

{{userName}}

但我可以不加掩饰地重写它：

<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>

{{userName}}

---

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

您可以使用

transclude

向指令中注入大量html。创建指令的想法是让您拥有一堆可重用的代码，可以在应用程序的各个部分中使用。转换允许您从模板进一步自定义指令的内容

按照您的示例，创建带有transclusion的

user post

指令的想法是，您的用户post在应用程序的不同部分可能没有完全相同的内容

如果您注意到在

模板2中，我可以添加一些额外的HTML以适应指令中的不同内容

模板1:

<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>

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

    // this directive might loop through post.comments and display a list
    // of comments on the post.
    <user-comments post-comments="{{post.comments}}"></user-comments>

    <p>some other customize html</p>
</user-post>



模板2:

<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>

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

    // this directive might loop through post.comments and display a list
    // of comments on the post.
    <user-comments post-comments="{{post.comments}}"></user-comments>

    <p>some other customize html</p>
</user-post>


//此指令可能会在post.comments中循环并显示列表
//对帖子的评论。
其他一些自定义html


现在我的应用程序中有2个用户帖子。一个有帖子和用户喜欢的内容，另一个有帖子和用户喜欢的内容和评论。
要理解转换，以及何时/如何使用转换，您必须稍微了解您试图表示的DOM，以及角度指令在DOM中的作用

具体来说，这与作为元素的指令相关（
restrict:'E'
）。让我们以最基本的HTML作为我们可能采用的指令：

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

现在，当DOM被编译时，
一些内容
有了一席之地。转换允许将元素的内部内容放置在模板中
ng transclude
指令存在的位置

现在，转换可能变得非常棘手，特别是当一个指令嵌套在另一个指令的内部内容中时，但它可能非常强大。但是，如果您的指令在标记的元素中没有内容，则不需要转换。有更多的方法可以利用转换，但在其核心，它们最终都回到了这个概念。
同一API提供了两个独立的功能：常规转换和元素转换

对于常规转换，基本用例是：您希望将一些内容从一个模板包含或替换到另一个模板。使用常规转换有两种方法可以做到这一点：ngTransclude指令和transclusion函数

下面是Eric Greene写的，我认为这是对代码常规转换的一个很好的解释

ngTransclude

HTML代码

<div foo>
  Some Content Here
</div>

<div foo>
  <div>the template</div>
  <div ng-transclude>Some Content Here</div>
</div>

<div foo>
  Some Content Here
</div>
JavaScript Code
.directive("foo", function() {
  return {
    template: "<div>the template</div>",
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(function(clone) {
        element.append(clone);
      });
    }
  };
})

<div foo>
  <div>
      the template
      <div>Some Content Here</div>
  </div>
</div>


这里有一些内容

JavaScript代码

.directive("foo", function() {
  // returns the Directive Definition Object
  return {
    transclude: true,
    template: "<div>the template</div><div ng-transclude></div>"
  };
})

指令（“foo”，函数（）{
//返回指令定义对象
返回{
是的，
模板：“模板”
};
})

使用ngTransclude指令的结果是以下HTML输出。 HTML代码

<div foo>
  <div>the template</div>
  <div ng-transclude>Some Content Here</div>
</div>

模板
这里有一些内容

转置功能

进行转换的第二种方法是使用transclude函数 在指令的后链接功能中提供。在下面的代码中， link属性指向post link函数。除非预先链接 函数是专门提供的，所有对链接函数的引用 请参阅post链接功能。查看下面的代码以了解 使用转置功能可以实现相同的目标：

HTML代码

<div foo>
  Some Content Here
</div>

<div foo>
  <div>the template</div>
  <div ng-transclude>Some Content Here</div>
</div>

<div foo>
  Some Content Here
</div>
JavaScript Code
.directive("foo", function() {
  return {
    template: "<div>the template</div>",
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(function(clone) {
        element.append(clone);
      });
    }
  };
})

<div foo>
  <div>
      the template
      <div>Some Content Here</div>
  </div>
</div>

这里有一些内容
JavaScript代码
.指令（“foo”，函数（）{
返回{
模板：“模板”，
是的，
链接：函数（范围、元素、属性、ctrl、transclude）{
转置（功能（克隆）{
元素。追加（克隆）；
});
}
};
})

transclude函数被传递一个回调参数 用于操作克隆元素的函数。在上面的代码中 回调函数将接收克隆的内容作为参数，然后 该函数将克隆的内容添加到DOM中。执行 of link函数会产生以下HTML输出：

HTML代码

<div foo>
  Some Content Here
</div>

<div foo>
  <div>the template</div>
  <div ng-transclude>Some Content Here</div>
</div>

<div foo>
  Some Content Here
</div>
JavaScript Code
.directive("foo", function() {
  return {
    template: "<div>the template</div>",
    transclude: true,
    link: function(scope, element, attrs, ctrl, transclude) {
      transclude(function(clone) {
        element.append(clone);
      });
    }
  };
})

<div foo>
  <div>
      the template
      <div>Some Content Here</div>
  </div>
</div>

模板
这里有一些内容

然而，对于元素转换，我想对他的答案进行扩展，因为他的解释对于用例来说似乎是混乱和不完整的。在Tero Parviainen的博客“上，他找到了元素转换的根源，主要是为了推迟UI某些部分的链接和附件

引用他的话：

理解元素转换

现在让我们将注意力转向您可以使用的另一种方法 转换：使用transclude:“element”进行元素转换

元素转换的一个用例是当您想要延迟 为UI的某些部分链接和附件，直到 发生。因为元素转换本质上移除了 DOM，并使您可以使用转换返回 函数，您可以控制这种情况发生的时间

比如你 可能只希望在某些操作之后链接和附加部分DOM 父作用域上的条件变为真：这里的条件是 本质上是ngIf的简化版本。如果你看看来源 ngIf的代码，您现在应该能够理解它在做什么： 它使用元素转换来有条件地链接 多莫