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) {}
        }
      }
  }
}]);

Answer 1

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');
           }
          ...