Ad

Angularjs Watching A Change In Elements Switch Frames

- 1 answer

I have a carousel that uses div I want to what to see which div it is and switch the rest of the page accordingly...

Here is some code from my controller that I tried the rootscope.candidateview is a ng-show and I want it to be true if it's the 1st 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();

The above doesn't work it seems to work for only a few seconds and never fires again.

Here is the 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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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>

I also tried to link ng-click to some javascript but that failed because when you click it doesn't change the active div in carousel fast enough and is always delayed.

Edit-----------------------------------

I added a few addition and subtraction functions to track currentFrame of carousel... But unfortunately if you double click it messes up the count because the frame needs transition time... I tried ng-disable the buttons with timeout but that freezes everything...

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

Problem with edited method: Double clicks messes up count... ng-disable with timeout causes carousel to wait too.

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

Answer

Instead of using ngwatch I hooked on the a event from the carusole. Read references for the carusole you use for this information.

Ad
source: stackoverflow.com
Ad