Question

我正在构建一个带有angularjs的POS软件，我需要列出数千种产品，每种产品由30个产品分开，有点像iPad上的应用程序。为了完成这项任务，我决定使用Swiperjs，一个用于创建幻灯片的精彩库，由于这个角度应用程序是专为iPad设计的，因此该库非常适合。

问题是，我想回收幻灯片，以便我不会向DOM添加500张幻灯片，但似乎Angularjs和Swiperjs的组合给了我一些问题。

首先，我有一个包含所有产品数据的数组：

// In ProductListCtrl
$scope.productArray = [];

然后我将该数组中的信息分成4个幻灯片，每个幻灯片包含30个元素：

var elements = $scope.productArray.slice(0, 120);
// slideGenerator is a function that seperates everything in slides
$scope.slides = Utilities.slideGenerator(elements, 30);

之后，我使用双ng-repeat：

在我的DOM中呈现信息

<div id="bloque" class="swiper-container">
    <!-- Ahora estoy desarrollando sin complicarme, repito la lista y la oculto -->

    <div id="lista-productos" class="list oculto swiper-wrapper" ng-controller="ProductsListCtrl">
        <div class="swiper-slide" ng-repeat="slide in slides">
            <div class="elementos">
                <div class="productos">
                    <div ng-repeat="element in slide">
                        <span ng-if="element.name != 'empty'">
                            <button product="{{element.name}}" hasAttribs="{{element.hasAttribs}}" class="btn-product" ng-click="showElementAttribs($parent.$parent.$index, $index)">
                                <span ng-if="textIsHidden == true && element.image">
                                    <div class="elemImg" style="background-image: url({{element.image}}); background-size: contain;"></div>
                                </span>
                                <span ng-if="textIsHidden == false || !element.image">
                                    <div class="elemName">{{element.name}}</div>
                                </span>
                            </button>
                        </span>
                        <span ng-if="element.name == 'empty'">
                            <button class="pro_vacio"></button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在此之前，一切都很完美。但随后用户再次滑动，滑动和滑动，我尝试加载新信息，如下所示：

if($scope.currentSlide >= 3) {
    // Update the data on the slide, $scope.wheel is simply
    // the slide I have to modify
    if($scope.wheel < $scope.slides.length) {
        $scope.slides[$scope.wheel] = Utilities.createSingleSlide($scope.productArray, $scope.currentSlide, 30);
        console.log("New slide created");
        $scope.wheel++;
            //$scope.$apply();
    }
    else {
        $scope.wheel=0;
    }

    swiper1.slides[0].clone().insertAfter(swiper1.slides.length - 1);
    swiper1.removeSlide(0);
    swiper1.swipeTo(swiper1.activeIndex-1, 0, false);
    swiper1.reInit();   

}

$scope.$apply();        
console.log("Slides", $scope.slides);

对我而言，这似乎应该有效，但它并不适用。它每次都会添加新的幻灯片并输出一些时髦的行为，它应该总是包含相同数量的幻灯片，4。

如果我注释掉角度代码：

    //if($scope.wheel < $scope.slides.length) {
    //    $scope.slides[$scope.wheel] = Utilities.createSingleSlide($scope.productArray, $scope.currentSlide, 30);
    //    console.log("New slide created");
    //    $scope.wheel++;
            //$scope.$apply();
    //}
    //else {
    //    $scope.wheel=0;
    //}

我得到了视图回收的所需行为，因为我总是得到相同数量的幻灯片，4，我得到一种无限循环。

在更改了幻灯片上的信息之后，我也尝试了这个：

swiper1.slides[0].append()

但这改变了我正在观看的当前幻灯片，这很糟糕，而且效果不佳。

那么为什么在修改数据后角度会添加新的幻灯片？

swiperjs plus angularjs和幻灯片回收

0 个答案: