Class directive that adds ng-class

Question

If I have something like this

<div ng-class="{'breakfast': meal == 'eggs'}"></div>

Now I need to create a directive that would add the same thing, so doing this:

restrict: 'C' scope: meal:"&" link:(scope, element, attr)-> element.attr('ng-class', "{'breakfast': meal == 'eggs'}")

adds the attribute to the DOM, but then nothing happens, when meal == 'eggs' it doesn't add breakfast class to the element. What am I doing wrong?

ps. I can of course do it with element.addClass and element.removeClass but then the animation would only work when I add the class, but wouldn't for the removal (if I have css styles like .breakfast-add, .breakfast-remove etc.

So the main reason why I needed that is to have an easier way to bind class based animations in directive, instead of doing ng-class="{'breakfast... etc. all the time. Ended up using $animate.addClass, but the question itself remains open — iLemming
– iLemming, Commented Jun 17, 2014 at 22:28

Pascal Ockert · Accepted Answer · 2014-06-17 01:48:19Z

Instead of modifying the element's attributes at link or compile time, you can use ng-class in the directive's template and use a scope variable with your classes. It works for me in the following example, and it seems to be cleaner:

HTML:

<div ng-app="app"> <div class="meal: eggs;">xxx</div> </div>

JS:

angular.module('app', []) .directive('meal', function () { return { template: '<div ng-class="classes" ng-transclude></div>', transclude: true, restrict: 'C', scope: { meal: '@' }, link: function (scope) { scope.classes = { breakfast: (scope.meal == 'eggs') }; } }; });

It's a class directive though... I don't want to transclude (do I?), it would create another element though?
Yes, it adds an element to the DOM which wraps the original content. This will not help in your case (the animation thing was not clear at the time of writing this answer ;) ) I think the usual way to add classes is element.addClass in the compile function (but will not work with CSS animations, too).

Collectives™ on Stack Overflow

Class directive that adds ng-class

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related