Question

我需要用ng-repeat实现一个feed。必须按新近度对Feed项目进行排序。但是，我不能为每个项目使用相同的模板，因为事件和行为是不同的。使用ng-if来渲染这样的feed事件是否有意义？

<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列表的最明显的限制是它们需要由相同的＆＃34; date_created＆＃34;属性。

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>

ng-repeat

1 个答案: