使用ng-repeat的Flickity不添加新项目

Question

我希望有一个使用Flickity和Angular's ng-repeat的滑块，我可以推送和弹出项目。

它主要起作用，但我遇到的问题是我推到滑块上的新项目不会附加到最后。相反，滑块中的最后一项不会被下一个推送的项目覆盖。 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会在有变化时更新。