我有一个简单的Carousel示例。 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;
}
}
}
答案 0 :(得分:2)
看起来存在竞争条件,如果我将有效幻灯片组在超时中包装并且延迟似乎有效:
$timeout(function () {
$scope.slides[6].active=true;
}, 100);
答案 1 :(得分:0)
我只是在努力解决这个问题。这是我过于技术性的 hack 完全合法的解决方案:
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完成解析其新元素时,这将发出一个事件。
<carousel interval="myInterval" on-carousel-change>
向添加元素的函数添加事件侦听器,并在其回调中设置活动幻灯片
$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活动的魔力。