Flickity с ng-repeat не добавляет новый элемент

Я хочу иметь слайдер, используя Flickity и Angular 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 flickity array-push
person LCIII    schedule 04.12.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я не знаком с плагином 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 обновляется при внесении изменений.

person DerekMT12    schedule 04.12.2015