Question

所以我有一个看起来像这样的旋转木马：

<div class="jumbotron-carousel" carousel interval="controller.jumbotronInterval" no-pause="true" no-transition="true">
    <div class="slide" slide ng-repeat="slide in controller.jumbotron" active="slide.active" style="background-image: url({{ slide.image }});">

    </div>
</div>

我的控制器看起来像这样（简化为简洁）

.controller('HomeController', ['preloader', function (preloader) {
    var self = this;

    // Set up our main carousel
    self.jumbotronInterval = 2000;
    self.jumbotron = [];

    // Private function to create the main slider slides
    var createSlides = function () {

        // Create an array of our images
        var slides = [{
            image: '/assets/images/carousel/jumbotron/_MG_0629.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y6128.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y6588.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y6779.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y6929.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y7157.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_J5Y7286.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_MG_0151.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_MG_0337.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_MG_0417.jpg'
        }, {
            image: '/assets/images/carousel/jumbotron/_MG_1300.jpg'
        }];

        // For each slide
        for (var i = 0; i < slides.length; i++) {

            // Get our slide
            var slide = slides[i];

            // If our image has loaded
            preloader(slide.image).then(function () {

                // Add to our jumbotron
                self.jumbotron.push(slide);

                console.log(self.jumbotron);
            });
        }
    };

    // Create your slides
    createSlides();
}]);

所以基本上发生的事情是我的预加载器服务等待图像加载然后将滑块推送到我的阵列。这就是我的服务（非常简单）：

.factory('preloader', ['$q', function ($q) {
    return function (url) {

        // Create our deferred promise and create an image object
        var deffered = $q.defer(),
            image = new Image();

        // Assign the url to the image
        image.src = url;

        // If the image has finished loading
        if (image.complete) {

            // Resolve the promise
            deffered.resolve();

            // Otherwise it hasn't completed
        } else {

            // Add an event listener to the load event
            image.addEventListener('load', function () {

                // Resolve the promise when the image loads
                deffered.resolve();
            });

            // Add an event listener to the load event
            image.addEventListener('error', function () {

                // Reject the promise
                deffered.reject();
            });
        }

        // Return our promise
        return deffered.promise;
    }
}])

问题是，当它将幻灯片推到幻灯片数组时，我得到一个角度错误：

错误：[ngRepeat：dupes]

我在每个图像加载完成后都做了一个控制台日志，那就是应用程序抱怨的时候。我＆＃34;可以＆＃34;等到所有图像都加载完毕，但我更愿意按顺序添加它们。有谁知道我怎么能这样做？

angularjs bootstrap carousel在图像加载后动态添加滑块导致重复错误

0 个答案: