AngularJS : Watch for class change not working

Question

Any ideas why angular watch did not work when class is added with jquery timeout function. The idea is that when jquery is fored to change class: angular to catch that new class. Working example in fiddle. When you scroll down you will see catched changing of class Solved: Fiddle

<div ng-app='myApp'>
    <div ng-controller="Ctrl" class="holder">
        <div class="pusher"></div>
        <table id="table">
            <thead>
                <tr>
                <th class="ui sticky gar" ng-repeat="friend in friends" add-remove-class>{{friend.name}}</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
       <div class="pusher"></div>
        <div class="pusher"></div>
        <div class="ui sticky" id="gar" add-remove-class>Garrrrr</div>
    </div>
    <p class="footer" ng-class="wohooOrNoo">footer</p>
</div>



 var myApp = angular.module('myApp', []);
    myApp.controller("Ctrl", function ($scope, $timeout) {
        $('#gar').sticky();
        $('gar').sticky();

       $scope.friends = [
      {name:'John', age:25, gender:'boy'},
      {name:'Jessie', age:30, gender:'girl'},
      {name:'Johanna', age:28, gender:'girl'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Peter', age:95, gender:'boy'},
      {name:'Sebastian', age:50, gender:'boy'},
      {name:'Erika', age:27, gender:'girl'},
      {name:'Patrick', age:40, gender:'boy'},
      {name:'Samantha', age:60, gender:'girl'}
    ]
    });

    myApp.directive('addRemoveClass', function () {
        return {
            link: function link(scope, element, attrs) {

                // create an observer instance
                var observer = new MutationObserver(function (mutations) {
                    scope.$apply(function () {
                        if (element.hasClass('fixed')) {
                            alert("wee");
                        }
                    });
                });

                // configuration of the observer:
                var config = {
                    attributes: true
                };

                // pass in the target node, as well as the observer options
                var node = element.get(0);
                observer.observe(node, config);
            }
        };
    });

What you want to achieve? – RIYAJ KHAN Jul 02 '15 at 08:37 — RIYAJ KHAN, Jul 02 '15 at 08:37
element can not be watched like this. – ngLover Jul 02 '15 at 08:40 — ngLover, Jul 02 '15 at 08:40
My purpose is: if element has class to fire a function – Jul 02 '15 at 08:55 — , Jul 02 '15 at 08:55
@ngLover thx a lot. can you vote up my question – Jul 17 '15 at 06:52 — , Jul 17 '15 at 06:52

score 2 · Answer 1 · answered Jul 02 '15 at 08:43

2

No directive need for that in your context. just use ng-class in angular Docs for ngClass

html:

<div ng-app='myApp'>
<div ng-controller="Ctrl">
    <div>
      <span id="zzz" ng-click="toggleClass()" ng-class="{'rouge': toggle, green : !toggle}">Coucou</span>
    </div>
</div>
</div>

angular:

angular.module('myApp', [])
  .controller('Ctrl', function($scope) {
         setTimeout(function() {
         $('#zzz').addClass('rouge');
       }, 2000);
      $scope.toggle = false;
      $scope.toggleClass = function() {
          $scope.toggle = !$scope.toggle;
      }
  })

Fiddle

answered Jul 02 '15 at 08:43

Sudharsan S

15,336
3
31
49

My purpose is: if element has class to fire a function, but 10x anyway – Jul 02 '15 at 08:55
and I do not want to see green at beggining – Jul 02 '15 at 08:59
@TeodorKolev - Have you look at the fiddle? – Sudharsan S Jul 02 '15 at 09:40
This is away from my point. I want to $watch for class. and if that class appears to fun a some function – Jul 02 '15 at 11:27
@TeodorKolev - Sorry Your question is unClear. Ask anybody – Sudharsan S Jul 02 '15 at 11:29
I am pointing that $scope.$watch did not catch class changes. What is unclear? – Jul 02 '15 at 11:31
can you vote my question, I have vote that answer for best – Jul 17 '15 at 06:51

score 1 · Answer 2 · edited May 23 '17 at 12:15

While it is recommended to initiate changes from angular side, so angular will know what is happening, it is understandable sometimes you need to initiate from outside.

In this case angular $watch won't work because the change is not made within angular itself. You need to access the element scope and call scope.$apply manually from outside.

Please refer to: AngularJS access scope from outside js function

AngularJS : Watch for class change not working

2 Answers2