angularjs - テンプレートと更新されたデータセットで ng-repeat を使用した AngularJs ディレクティブ

Question

これがこの質問のテストケースです。angularjs アプリケーションでJCarouselを使用しようとしています。これを行うために、問題なく機能するディレクティブを作成しました。

angular.module('directives', []).directive('jcarousel',
    function() {
      return {
        restrict: "A",
        scope: {feeds: '=', active_partner: '='},
        template: '<ul><li ng-repeat="(k, feed_item) in feeds  | filter: { partner_id: active_partner.id }">{{feed_item.text}}</li></ul>',
        link: function(scope, elem, attr, ctrl){
          c = 3;
          item_margin = 10;
          item_padding = 10;
          $(elem).addClass('carousel');
          cw = $('.carousel ul').width();
          iw = (cw-item_margin*c - c*item_padding*2) / c;
          scope.$watch('feeds', function(feeds){
             if (feeds.length){
              $('.carousel ul li').width(iw);
              $(elem).jcarousel({scroll: 1});
              $('.jcarousel-next').html('<i class="icon-chevron-right"></i>');
              $('.jcarousel-prev').html('<i class="icon-chevron-left"></i>');
            }
          });
        }
      };
    }
  );

使い方はとても簡単です:

<label>
  Filter:
  <select ng-model="active_partner" ng-options="partner as partner.name for partner in partners"></select>
</label>
<p>Count: {{ feeds.length }}</p>
<div jcarousel feeds="feeds" active_partner="active_partner"></div>

カルーセルでフィードをフィルタリングする必要があります。何らかの理由で、フィルタリング後に jcarousel を適用すると、html が混乱します。

どんな助けでも感謝します。