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

シン・ディレクティブ・アプローチを使用すると、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); 
    }); 
    } 
} 

}; 

またはthinディレクティブの代わりに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>