Угловое действие при изменении класса

Question

Я использую ползунок jQuery и должен обнаруживать элемент slideBl, когда он получает класс cycle-slide-active, который перемещается со слайда для непрерывного скольжения.

вот мой Джейд (HTML):

#slideshow2(slideshow, data-cycle-speed="500", data-cycle-prev="#prev", data-cycle-next="#next") 
div.slideBl(ng-repeat="image in images" ng-init="rating = image.rate" class="slide{{image.id}}") 
    span(star-rating, rating-value="rating" max="5" on-rating-selected="rateFunction(rating)") 
    img.slide.img-responsive(ng-src="{{image.url}}") 
    div() {{image.count}} 

Я прочитал о Угловое в $ наблюдать и $ наблюдать, и благодаря учебник Бен Надель, я в конечном итоге с следующей директивой:

.directive('slideBl', function ($compile) { 
    return { 
     restrict: "C", 
     link: 
      // I bind the UI events to the local scope. 
      function ($scope, element, attrs) { 

      setTimeout(function() { 
       // Register an $observe callback. 
       attrs.$observe(
        "slideBl", 
        function innerObserveFunction() { 
         console.log("Inner $observe() fired."); 
        } 
       ); 

       // Register a $watch callback. 
       $scope.$watch(
        function innerWatchFunction() { 
         console.log("Inner $watch() fired."); 
        }); 
       }, 250); 
     } 
    }; 
}); 

С помощью этого кода я могу обнаружить все элементы slideBl после загрузки страницы, но как я могу продолжать отслеживать изменения класса cycle-slide-active, поэтому я мог подсчитать, сколько раз было показано слайд?

Answer 1

Вы должны смотреть атрибут класса и проверьте, был добавлен cycle-slide-active класса (DEMO):

app.directive('slideBl', function ($compile) { 
    return { 
     restrict: "C", 
     link: function ($scope, element, attrs) { 
      $scope.$watch(function() { 
       return element.attr('class'); 
      }, function(newClasses, oldClasses) { 
       if (containsSlideClass(newClasses) && (!containsSlideClass(oldClasses) || newClasses == oldClasses)) { 
        console.log('Slide active'); 
       } 
      }); 

      function containsSlideClass(classStr) { 
       return classStr.split(' ').indexOf('cycle-slide-active') !== -1; 
      } 
     } 
    }; 
});