how to get ng-class value in directive

Question

I have some repeated 'li' elements, and some of them has 'active' class like this

<li ng-repeat="menuSubItem in menuItem.items" ng-class="{active: vm.currentMenuName == menuSubItem.name}" active-collapsible>

in the othe hand, I have a directive to add some classes depend on 'active' class, My directive is like this

directive('activeCollapsible', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {

    }
  }
});

but I don't see 'active' class in 'element' argument. (I have already add jQuery before Angular.)

$(element).hasClass('active')

How Can I get 'active' class in my directive?

Is vm.currentMenuName true when you try to get the active class? — Chrillewoodz, Jul 04 '15 at 06:05
Watching a `class` for changes is a bad design. Why don't you use the same condition as in the `ng-class` directive? — Michael, Jul 04 '15 at 06:32

score 4 · Accepted Answer · answered Jul 04 '15 at 06:10

You could get the element has active class or not using $watch functino on scope, the function return in $watch first part will get evaluated everytime when digest cycle run & then you will get either true or false value on the basis of element.hasClasss('active')

Directive

directive('activeCollapsible', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $scope.$watch(function() {
                return element.hasClass('active')
            }, function(newVal) {
                if (newVal) //then it has active Class
                //do something
            });
        };
    };
});

how to get ng-class value in directive

1 Answers1