ng-class will not trigger on custom directive

Question

I am currently developing a slide menu directive for AngularJS. The javascript consists of three types of directives: the directives for each type of sliding menu (for brevity's sake I only included the left sliding menu), one wrapper directive for the rest of the screen, asmWrapper, and one control button directive, asmControl. Currently, all of these directives are using a service, asmService to communicate.

When the user clicks an asmControl, that directive's controller calls a method on asmService that determines which menu has been triggered and emits an 'asmEvent' on the $rootScope. asmSlidingMenu's controller will catch that event and update the active variable in its scope, but the DOM element's CSS class remains unchanged.

I assume the ng-class is not being set. How do I fix this?

I have included the code for the asmSlidingMenu directive below. To see a more complete example, view the Plunker I made.

slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService', 
function($rootScope, asmService) {
  return {
      restrict: 'AEC'
    , scope: {}
    , controller: function($scope) {
        $rootScope.$on('asmEvent', function(event, prop) {
          console.log('Intercepted: ' + asmService.asmStates.slideLeft.active);
          $scope.active = asmService.asmStates.slideLeft.active;
        });
      }
    , compile: function(element, attrs) {
        attrs.$set('class', 'asm asm-horizontal asm-left');
        attrs.$set('data-ng-class', '{"asm-left-open: active"}');
        return {
            pre: function preLink(scope, iElement, iAttrs) {}
          , post: function postLink(scope, iElement, iAttrs) {}
        }
      }
  }
}]);

a better oliver · Accepted Answer · 2014-04-26 07:12:35Z

19

First of all active is in an isolate scope, so ng-class has no access to it.

Secondly, and more importantly, ng-class is added after the directives of the element have been collected by angular. It's too late.

There's no reason to use ng-class if you have your own directive.

slideMenu.directive('asmSlideLeft', ['$rootScope', 'asmService',
  function($rootScope, asmService) {
    return {
      restrict: 'AEC'
      ...
      link: function(scope, element) {
        element.addClass('asm asm-horizontal asm-left');
        $rootScope.$on('asmEvent', function() {
           if (asmService.asmStates.slideLeft.active) {
             element.addClass('asm-left-open');
           }
           else {
            element.removeClass('asm-left-open');
           }
          ...

answered Apr 26, 2014 at 7:12

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

3 Comments

Skystrider Over a year ago

What if your element that has ng-class exists outside of the directive element? Sure you can do: angular.element(document.getElementById('id')).addClass('someclass') but the whole idea is to have two way data binding with angular. It is much nicer to have the class name in the view - on the html element itself. More readable.

Skystrider Over a year ago

@zeroflagL Missing out on two way data binding. External element wants it's class updated when the model changes, but when an isolated scope directive modifies the model only the isolated scope gets the digest event. I want the external item that depends on the same model to be digested too.

a better oliver Over a year ago

@Skychan What's an "external element"? The directive simply changes the class attribute. There is neither a model nor an isolated scope. If you want to use ngClass instead then you have to put the event handler into a controller.

Collectives™ on Stack Overflow

ng-class will not trigger on custom directive

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related