различные шаблоны и объекты в 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, каждый со своим шаблоном, и получать их данные через пункт-инфо связывания.

Я думаю, что это нормально, но я надеюсь, что другие пошли по этой дороге. Наиболее очевидным ограничением в том, почему я не включаю несколько списков 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 вместо тонкой директивы, но он будет создавать 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>