Bootstrap Angular carousel 动态设置活动幻灯片

Question

我正在使用 Bootstrap Angular 轮播，我想要做的是在加载时动态设置活动类。我的mediacontent[slider_url].items 是从后端加载的。我没有任何承诺的方法，否则我会设置，

mediacontent[slider_url].items.active=true;

以下是我用来从后端获取图像数组的工厂（用于无限滚动），

图像数据工厂：

app.factory('ScrollGallery', function($http) {

    var Gallery = function(url) {
        this.items = [];
        this.busy = false;
        this.next = url;
        this.end = false;
        this.extra = {};

    };

    Gallery.prototype.nextPage = function() {
        if (this.busy)
            return;
        this.busy = true;
        if (this.next) {
            var url = this.next;
        } else {
            this.end = true;
            this.busy = false;
            return;
        }
        $http.get(url).success( function(data) {

            var items = data.results;
            var extra = [];
            if ( typeof data.extra != 'undefined') {
                extra = data.extra;
            }

            for (var i = 0; i < items.length; i++) {
                this.items.push(items[i]);
            }
            this.extra = extra;
            this.next = data.next;
            this.busy = false;
            if (!data.next)
                this.end = true;
            this.count = data.count;
        }.bind(this));
    };

    return Gallery;
});

轮播 HTML：

<carousel id="myCarousel" interval="myInterval"  on-carousel-change="onSlideChanged(nextSlide, direction)">

        <slide ng-repeat="slide in mediacontent[slider_url].items" active="slide.active">
            <div ng-if="slider_url=='image'">
            <img ng-src="{[{slide.file}]}" alt="{[{slide.file}]}" style="margin:auto;width:250px;height:400px" />
            </div>
       </slide>

</carousel>         

有什么方法可以动态设置激活，请指教。

我试过的这个笨蛋： http://plnkr.co/edit/VemNkVnVtnaRYaRVk5rX?p=preview

Answer 1

我遇到的问题是我没有得到任何 $promise 方法来获取 data 。因此我无法在 Array 中设置活动类为真。我在服务方法中添加了承诺。

在控制器中我使用索引设置活动类

$scope.mediacontent[slider_url].items[idx].active=true

无限服务 ::

app.factory('ScrollGallery', function($http,$q) {

    var Gallery = function(url) {
        this.items = [];
        this.busy = false;
        this.next = url;
        this.end = false;
        this.extra = {};

    };

    Gallery.prototype.nextPage = function() {
        var def = $q.defer();
        if (this.busy)
            return;
        this.busy = true;
        if (this.next) {
            var url = this.next;
        } else {
            this.end = true;
            this.busy = false;
            return;
        }
        $http.get(url).success( function(data) {

            var items = data.results;
            var extra = [];
            if ( typeof data.extra != 'undefined') {
                extra = data.extra;
            }

            for (var i = 0; i < items.length; i++) {
                this.items.push(items[i]);
            }
            this.extra = extra;
            this.next = data.next;
            this.busy = false;
            if (!data.next)
                this.end = true;
            this.count = data.count;
              def.resolve(data);
        }.bind(this));
        return def.promise;
    };

    return Gallery;
});

在控制器中 ::

$scope.mediacontent[$scope.slider_url] =new ScrollGallery($scope.slider_url_pass); 
        $scope.mediacontent[$scope.slider_url].nextPage().then(function(albums) {

                $scope.mediacontent[$scope.slider_url].items[$scope.img_no].active=true;

                console.log('albums returned to controller.');
            },
            function(data) {
                console.log('albums retrieval failed.');
            });