【问题标题】：Flickity with ng-repeat not adding new item带有ng-repeat的Flickity不添加新项目
【发布时间】：2016-03-09 16:32:56
【问题描述】：

我想要一个使用 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);
}

【问题讨论】：

标签： angularjs array-push flickity

【解决方案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 会在有变化时更新。

【讨论】：