Angular directive class not being applied

Question

Using element.addClass doesn't add the class onto the element. If I remove class="progress-radial progress-{{percentage}}" from the template it does however work.

Not sure what exactly is going wrong as the code fires correctly, just doesn't seem to want to add a new class if the attribute already exists.

angular.module(moduleName, [])
.directive('npProgress', function() {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      percentage: '@'
    },
    template: '<div class="progress-radial progress-{{percentage}}">' +
    '<div class="overlay">{{percentage}}</div>' +
    '</div>',
    link: function(scope, element, attrs) {
      if ( scope.percentage > 50 ) {
        element.addClass('progress-radial--positive');
      }
    }
  }
});

Answer 1

Replace the interpolated class with the ng-class directive.

ERRONEOUS

 //AVOID interpolated class template: '<div class="progress-radial progress-{{percentage}}">' + '<div class="overlay">{{percentage}}</div>' + '</div>', 

USE ng-class="'progress-'+percentage" :

template: '<div class="progress-radial" ' +
                'ng-class="' +"'progress-'" + '+percentage">' +
              '<div class="overlay">{{percentage}}</div>' +
          '</div>',

The binding of the interpolated string was fighting the changes by the custom directive.

This is a Known Issue

Known Issues

Dynamically changing an interpolated value

You should avoid dynamically changing the content of an interpolated string (eg attribute value or text node). Your changes are likely to be overwriten, when the original string gets evaluated.

-- AngularJS Developer Guide -- Interpolation -- Known Issues

Answer 2

Try adding the class using angular.element

Here is the Documentation.

Also use parseInt on scope.percentage since you are sending string percentage using @ binding.

parseInt converts the string to integer and then compares.

angular.module(moduleName, [])
.directive('npProgress', function() {
  return {
    restrict: 'AE',
    replace: true,
    scope: {
      percentage: '@'
    },
    template: '<div class="progress-radial progress-{{percentage}}">' +
    '<div class="overlay">{{percentage}}</div>' +
    '</div>',
    link: function(scope, element, attrs) {
      if ( parseInt(scope.percentage) > 50 ) {
        angular.element(element).addClass('progress-radial--positive‌​');

      }
    }
  }
});