Angularjs Flickity与ng重复不添加新项目

我想有一个滑块使用和ng重复，我可以推和弹出项目从

它主要是工作，但我的问题是，我推到滑块上的新项目不会附加到末尾。相反，滑块中的最后一个项目会被下一个推送的项目覆盖。HTML

div

元素和数组对象被正确地推入，但是滑块没有正确地可视化它

在index.html代码中，我只有一个按钮，可以调用

pushItem（）

。数组本身被正确添加到，并且新的div项被正确创建；它只是没有显示在上面所述的滑块中

HTML

---

我不熟悉Flickity插件，但我看到的一个问题是，您没有使用指令将其绑定到Angular中

angular.module('whateverMod').directive('flickity', [function() {
   return {
      restrict: 'E',
      templateUrl: '/path/to/template/flickity.html',
      replace: true,
      scope: { items: '=' },
      link: function(scope, elem, attrs, ctrl) {
         scope.$watch('items', function() {
            elem.flickity({
               //your settings
            });
         });
      }
   };
}]);

然后在指令模板中，

flickity.html

：

<div class="flick-gallery">
    <div ng-repeat="item in items" class="gallery-cell">
        Header:
        <p>{{item.text1}}</p>
        Verse:
        <p>{{item.obj1.text2}}</p>
    </div>
</div>

标题：
{{item.text1}

诗句：
{{item.obj1.text2}

根据控制器中的阵列，可以使用如下指令：

<flickity items="itemViewer"></flickity>

不需要在底部添加额外的脚本，现在Flickity会在发生更改时进行更新

<div class="flick-gallery">
    <div ng-repeat="item in items" class="gallery-cell">
        Header:
        <p>{{item.text1}}</p>
        Verse:
        <p>{{item.obj1.text2}}</p>
    </div>
</div>

<flickity items="itemViewer"></flickity>