1

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);
            }
        };
    });
Improve this question
4
  • 1
    What you want to achieve? Commented Jul 2, 2015 at 8:37
  • element can not be watched like this. Commented Jul 2, 2015 at 8:40
  • My purpose is: if element has class to fire a function Commented Jul 2, 2015 at 8:55
  • @ngLover thx a lot. can you vote up my question Commented Jul 17, 2015 at 6:52

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

My purpose is: if element has class to fire a function, but 10x anyway
and I do not want to see green at beggining
@TeodorKolev - Have you look at the fiddle?
This is away from my point. I want to $watch for class. and if that class appears to fun a some function
@TeodorKolev - Sorry Your question is unClear. Ask anybody
|
1

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

Improve this answer

Comments