0

我在 3 个元素上使用 ng-repeat，我想每 30 秒推送一个动态项目，

问题是当我将一个元素推送到数组时，轮播卡住了，不能反映 ng-repeat 中项目的当前状态。

我找到的解决方案是：

1.使用 FlickityService 销毁当前轮播。

2.将新元素推入数组。

3.使用 FlickityService 重新创建轮播。

上述解决方法的问题在于它非常笨拙，需要破坏 DOM 元素并一遍又一遍地重新创建它——非常昂贵的解决方案。我用当前的codepen模拟了这个问题：

var app = angular.module('app', ['bc.Flickity']);

app.controller('MyController', function($scope,FlickityService,$document,$interval){
    var counter = 4;
    $scope.myCustomOptions = {
      cellSelector: '.carousel-cell',
      initialIndex: 1,
      prevNextButtons: true,
    };
  
    $scope.items = [{
      Name: "Name1"
    },{
      Name: "Name2"
    },{
      Name: "Name3"
    }];
  
  angular.element($document[0]).ready(() => {
     var element =             angular.element(document.getElementById('carousel-container'));

    // Initialize our Flickity instance
    FlickityService.create(element[0], element[0].id,$scope.myCustomOptions);
    
  });
  
  $interval(function(){
    $scope.items.push({Name:"Name"+counter});
  }, 30* 1000)

  });
.carousel-cell {
  width: 20%;
  height: 200px;
  margin-right: 5px;
  background: green;
  border-radius: 5px;
}

.carousel-cell:before {
  display: block;
  color: black;
}
<link href="https://rawgit.com/metafizzy/flickity/master/dist/flickity.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/metafizzy/flickity/master/dist/flickity.pkgd.min.js"></script>
<script src="https://rawgit.com/benjamincharity/angular-flickity/master/dist/angular-flickity.js"></script>

<div ng-app="app" ng-controller="MyController">
  <div id="carousel-container">
      <div ng-repeat="item in items track by $index" class="carousel-cell">
        {{item.Name}}
      </div> 
  </div>  
</div>

在我看来，最佳解决方案是，当我更新当前数组时，flickity 会立即更新。

我很乐意得到任何帮助。

4

0 回答 0