Javascript Angularjs观察元素的变化切换帧

我有一个使用div的旋转木马，我想知道它是哪个div，并相应地切换页面的其余部分

下面是我的控制器中的一些代码，我尝试了rootscope.candidateview是一个ng秀，如果它是第一个div，我希望它是真的

self.changedWatcher = function(){
            var items = angular.element(document.querySelectorAll(".item"));
            $scope.$watch(items, function() {
                for (var i = 0; i < items.length; i++) {
                    var wrappedItem = items[i];
                    if (wrappedItem.hasClass('active')) {
                        if (i == 0) {
                            alert("hi");
                            $rootScope.candidateView = true;
                        } else if (i == 1) {
                            $rootScope.candidateView = false;
                            alert("hi2");
                        } else {
                            $rootScope.candidateView = false;
                            alert("hi3");
                        }
                    }
                }
            });
        }
        self.changedWatcher();

self.changedWatcher=function（）{
var items=angular.element（document.querySelectorAll（“.item”）；
$scope.$watch（项，函数（）{
对于（变量i=0；i

上述方法不起作用，它似乎只起作用几秒钟，而且再也不会开火

以下是HTML：

    <div id="myCarousel" class="carousel slide" data-ride="carousel"
    data-interval="false" ng-controller='MainController as ctrl'>
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            first item...
        </div>
        <div class="item">
            another item...
        </div>
        <div class="item">
        ... an item
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button"
        data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"
        aria-hidden="true"></span> <span class="sr-only">Previous</span>
    </a> <a class="right carousel-control" href="#myCarousel" role="button"
        data-slide="next"> <span
        class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<!-- /.carousel -->


<!--below is div to show -->

<div class="container viewpoint" ng-show='candidateView'></div>

第一项。。。
另一项。。。
... 项目

我还尝试将ng click链接到一些javascript，但失败了，因为当您单击它时，它不会足够快地更改carousel中的活动div，并且总是被延迟

编辑-----------------------------------

我添加了一些加减函数来跟踪旋转木马的当前帧。。。但不幸的是，如果你双击它会弄乱计数，因为帧需要转换时间。。。我尝试用超时禁用按钮，但这会冻结所有内容

$rootScope.currentFrame = 0;

        self.changeFrame = function(value) {
            $rootScope.currentFrame = value;
        }

        self.addFrame = function(value) {
            $rootScope.currentFrame += value;
            if ($rootScope.currentFrame > 2)
                $rootScope.currentFrame = 0;
            if ($rootScope.currentFrame < 0)
                $rootScope.currentFrame = 2;
        }

$rootScope.currentFrame=0；
self.changeFrame=函数（值）{
$rootScope.currentFrame=值；
}
self.addFrame=函数（值）{
$rootScope.currentFrame+=值；
如果（$rootScope.currentFrame>2）
$rootScope.currentFrame=0；
如果（$rootScope.currentFrame<0）
$rootScope.currentFrame=2；
}

编辑方法的问题：双击会弄乱计数。。。ng禁用超时也会导致转盘等待

$rootScope.currentFrame = 0;

        self.changeFrame = function(value) {
            $rootScope.currentFrame = value;
        }

        self.addFrame = function(value) {
            $rootScope.disable = true;
    $timeout(function() {
            $rootScope.currentFrame += value;
            if ($rootScope.currentFrame > 2)
                $rootScope.currentFrame = 0;
            if ($rootScope.currentFrame < 0)
                $rootScope.currentFrame = 2;
          }, 500);
           $rootScope.disable = false;
        }

$rootScope.currentFrame=0；
self.changeFrame=函数（值）{
$rootScope.currentFrame=值；
}
self.addFrame=函数（值）{
$rootScope.disable=true；
$timeout（函数（）{
$rootScope.currentFrame+=值；
如果（$rootScope.currentFrame>2）
$rootScope.currentFrame=0；
如果（$rootScope.currentFrame<0）
$rootScope.currentFrame=2；
}, 500);
$rootScope.disable=false；
}

我没有使用ngwatch，而是从carusole中连接了一个事件。阅读用于此信息的carusole的参考资料。

为什么不使用Angular UI引导，特别是Carousel指令（）。通过这种方式，您可以使用ngRepeat管理您的项目，并且可能很容易解决您的问题。@beaver I可能是错误的，但该版本无法处理html而不是图片。现在真正发生的是一个带有图像和类似html的文本框的div旋转木马。对不起，你会在旋转木马中显示通用html吗？这是一个正在工作的显示角度UI引导旋转木马指令，您可以在其中编辑和验证这是否有助于您澄清，

包装旋转木马循环显示的项目