Question

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

以下是我的控制器中的一些代码，我尝试过rootscope.candidateview是一个ng-show，如果它是第一个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();

上述功能似乎只能工作几秒钟而且再也不会发光。

这是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但是失败了，因为当你点击它时，它并没有足够快地改变旋转木马中的活动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;
        }

编辑方法的问题：双击混乱计数... ng-disable with timeout会导致轮播等待。

$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;
        }

Answer 1

而不是使用ngwatch我迷上了来自carusole的事件。阅读您用于此信息的carusole的参考文献。

Angularjs观看元素切换帧的更改

1 个答案: