Angular UI Bootstrap Carousel在制作新幻灯片后设置活动幻灯片

Question

我有一个简单的轮播示例。 Plnkr 上的示例显示了我在应用程序中所做的事情。我必须更改应用程序中的幻灯片。当我在更改幻灯片后设置活动幻灯片时，它会转到该幻灯片，然后滑出被遗忘或转到第一张幻灯片。我怎么解决这个问题？这样在制作新幻灯片后我可以转到正确的幻灯片吗？

http://plnkr.co/edit/PJg9U4HZ1k5aSTSvbl3k?p=preview

angular.module('plunker', ['ui.bootstrap', 'ngTouch']);
    function CarouselDemoCtrl($scope) {
        $scope.genderPerson = "men";
        $scope.myInterval = -1;
        $scope.slides = [];

        $scope.$watch("genderPerson", function( newValue, oldValue ) {
            $scope.MakeSlides();
        });

        $scope.MakeSlides = function() {
            var newSlides = [];
            for ( var i = 0; i < 10; i++ ) {
                newSlides[i] = { image: 'http://api.randomuser.me/portraits/' + $scope.genderPerson + '/' + i + '.jpg' };
             }
             $scope.slides = newSlides;
             if ( $scope.slides[6] ) {
                 $scope.slides[6].active=true;
             }
        }
    }

Answer 1

看起来存在竞争条件，如果我将活动幻灯片集包装在超时中并延迟它似乎可以工作：

  $timeout(function () {
    $scope.slides[6].active=true;
  }, 100);

Answer 2

我只是在这个问题上苦苦挣扎。这是我的过度技术 hack 完全合法的解决方案：

1。创建一个覆盖addSlide 方法的新指令

.directive('onCarouselChange', function ($animate, $parse) {
    return {
        require: 'carousel',
        link: function (scope, element, attrs, carouselCtrl) {
            var origAdd = carouselCtrl.addSlide;
            carouselCtrl.addSlide = function(slide, element) {
                origAdd.apply(this, arguments);
                $animate.on('enter', element, function (elem, phase) {
                    if (phase === 'close') {
                        scope.$emit('carouselEntered');
                    }
                });
            };
        }
    };
})

这将在轮播的 ngRepeat 完成对其新元素的解析时发出一个事件。

2。将新指令添加到轮播元素

<carousel interval="myInterval" on-carousel-change>

3。在事件监听器上设置活动幻灯片

向添加元素的函数添加事件侦听器，并在其回调中设置活动幻灯片

$scope.MakeSlides = function() {
    var newSlides = [];
    for ( var i = 0; i < 10; i++ ) {
        newSlides[i] = { image: 'http://api.randomuser.me/portraits/' + $scope.genderPerson + '/' + i + '.jpg' };
    }
    $scope.slides = newSlides;
    var dereg = $scope.$on('carouselEntered', function(event, data) {
        if ($scope.slides[6]) {
            $timeout(function () {
                $scope.slides[6].active=true;
            });
            dereg();
        }
    });
}

这一切都归功于 $animate 事件的魔力。