ng-repeat 中的不同模板和对象

Question

我需要使用 ng-repeat 实现提要。提要项目必须按新近度排序。但是，我不可能为每个项目使用相同的模板，因为事件和行为是不同的。使用 ng-if 来呈现这样的提要事件有意义吗？

<ul ng-controller="FeedController as FeedCtrl">
 <li ng-repeat="feedItem in FeedCtrl.feedFactory.feedItems | orderBy '-date_created'">
    <div feed-comment-liked ng-if="feedItem.type == 'comment_liked'" item-info ="feedItem">
    <div feed-comment-reply ng-if="feedItem.type == 'comment_reply'" item-info ="feedItem">
    <div feed-friend-request ng-if="feedItem.type == 'friend-request'" item-info ="feedItem">
 </li>
</ul>

这当然需要一些名为 feedCommentLiked、feedCommentReply 和 feedFriendRequest 的指令，每个指令都有自己的模板，并通过 item-info 绑定获取它们的数据。

我认为这没问题，但我希望其他人也能走这条路。为什么我不包含多个 ng-repeat 列表的最明显限制是它们需要按相同的“date_created”属性排序。

Answer 1

您可以使用精简指令方法，这样您就可以拥有一个指令。

<ul ng-controller="FeedController as FeedCtrl">
<li ng-repeat="feedItem in FeedCtrl.feedFactory.feedItems | orderBy '-date_created'">
<div thin-directive="{{myConfig[feedItem.type]}}" item-info ="feedItem">
  </li>
</ul>

$scope.myConfig = {
   comment_liked: 'template url here',
   comment_reply: 'template url here',
   friend-request: 'template url here',
}

-----

.directive('thinDirective', function($compile,$templateRequest) {
 return {
  restrict: 'A',
  scope: false, 
  compile: function(element, attrs) {
    return function (scope, element, attrs) {
    $templateRequest(attrs.thinDirective).then(function(html){
      var template = angular.element(html);
      element.append(template);
      $compile(template)(scope);
    });
  }
}

};

或者您可以使用 ng-include 代替 Thin 指令，但它会创建 N 个子作用域。您的来电

<ul ng-controller="FeedController as FeedCtrl">
<li ng-repeat="feedItem in FeedCtrl.feedFactory.feedItems | orderBy '-date_created'">
<div ng-include="myConfig[feedItem.type]" item-info ="feedItem">
  </li>
</ul>