1

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

它大部分都在工作，但我遇到的问题是我推到滑块上的新项目没有附加到末尾。相反，滑块中的最后一项只会被下一个推送的项目覆盖。HTMLdiv元素和 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);
}
4

1 回答 1

2

我不熟悉 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 会在有更改时更新。

于 2015-12-04T17:21:17.963 回答