ng-class does not remove a class that was there before angular was bootstrapped

Question

Still under 72 hours coming up to speed with angular. Having used knockout for a while, I have to say it's interesting. My question right now has to do with ng-class.

Say I have the following:

<div class="myClass" ng-class="{myClass: false}">

When angular bootstraps, it does not remove the myClass attribute that was rendered there before. I had expected it to, since that's what ko's css binding does. It seems that angular only removes the class if angular was the one who put it there.

So, is there a common workaround for this? Other than creating a custom directive?

Answer 1

Since you're only using Angular for the form and need a class to be active on elements within the form prior to Angular bootstraping it looks like a directive may be the best way to go.

The following directive will remove the specified class from the element its on once the directive is linked in by Angular (which is almost the same point when ngClass will kick in):

.directive('removeClass', function(){
    return {
        restrict: 'A',
        link: function(scope,element, attrs){
            element.removeClass(attrs.removeClass);
        }
    };
});

Used like so:

<div class="oldClass" remove-class="oldClass" ng-class="{newClass: true}">stuff</div>

demo fiddle