观察 UI Bootstrap carusel 中的变化

Question

您好，我按照教程使用 UI Bootstrap 创建了基本轮播。 我想跟踪当前项目以便在导航中更改 class，我找到了使用 $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 中的活动 class，而是检查模型中的活动字段：

// 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
});