Question

您好我按照教程使用UI Bootstrap创建基本轮播。我想跟踪当前项目以便更改导航中的类，我找到了使用$ watch的解决方案，有没有更好的方法来跟踪该更改？我的示例代码：

$scope.$watch(function () {

    var caruselCurrentItem = 1;
    caruselCurrentItem = $('.carousel-inner .active').index();
    caruselCurrentItem += 1;

    $('#ulTest li').removeClass('TEST');
    $('#ulTest li:nth-child('+caruselCurrentItem+')').addClass('TEST');


});

Answer 1

你使用$ watch的方式肯定不会像你期望的那样工作。但是，我不是检查DOM中的活动类，而是检查模型中的活动字段：

// I assume your slides are in $scope.slides
$scope.$watch(function() {
    // This function returns the index of the active slide
    var activeSlides = $scope.slides.filter(function(x) { return x.active }); 
    return $scope.slides.indexOf(activeSlides[0]);
}, function(index) {
    // The index has changed. Now you can do something with it
});

注意UI Bootstrap carusel的变化

1 个答案: