angularjs - AngularJs 指令与模板中的 ng-repeat 和更新的数据集

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 出现混乱：

任何帮助表示赞赏。