Flickity with ng-repeat not adding new item

Question

我想要一个使用Flickity和Angular的ng重复的滑块，我可以从中推送和弹出项目。

它基本上是有效的，但我遇到的问题是，我推到滑块上的新项目不会附加到末尾。相反，滑块中的最后一个项目一直被下一个推送的项目覆盖。HTML div元素和Array对象被正确地推到上面，但滑块没有正确地可视化它。

在我的index.html代码中，我只有一个调用pushItem()的按钮。数组本身被正确地添加到，并且新的div项被正确地创建；它只是没有如上所述显示在滑块中。

HTML

<div id="itemviewer" class="flick-gallery js-flickity">
    <div class="gallery-cell">hey hey</div>
    <div class="gallery-cell">oh yeah!</div>
    <div class="gallery-cell">here we go</div>
    <div ng-repeat="item in itemViewer" class="gallery-cell">
        Header:
        <p>{{item.text1}}</p>
        Verse:
        <p>{{item.obj1.text2}}</p>
    </div>
</div>

<script>
    $('.flick-gallery').flickity({
    })
</script>

Javascript

$scope.pushItem = function () {
  $scope.itemViewer.push(item);
}

Answer 1

我不熟悉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>

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

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

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