Toggle Directive in AngularJS

Question

I am trying to do something similar to this SO question. However, I need to do this in AngularJS. I need to animate the rotation of a button 180 degrees when someone clicks it. If the button is active, I need to rotate it counter-clockwise. If its inactive, I need to rotate clockwise.

I understand the basics of directives. However, I do not understand how to integrate CSS animations with my directives. I think I need to use the link function. Even then, I'm not sure what to do though. Currently, I have:

myApp.directive('toggle', [function() {
    return {
        restrict:'A',
        controller: function($scope) {
          $scope.isActive = true;
        },
        link: function (scope, element) {
          if (scope.isActive) {
            // rotate button counter-clockwise via CSS
          } else {
            // rotate button clockwise back to original position.
          }
          scope.isActive = !scope.isActive;
        }
   };
}]);

My thought is, when I need to use the directive, I would do something like this:

<button **toggle** class="btn btn-link"><span class="glyphicon glyphicon-upload"></span></button>

Am I on the right track? I feel like I'm close. However, with the inclusion of AngularJS, there are some things happening that I do not fully understand yet. But, I feel like I'm trying to do something that was easy in jQuery. I'm not complaining. I'm just trying to understand how to get this to work the Angular way.

Thank you!

The same can be done over here using the ngClass no directive required. — V31, Sep 10 '14 at 13:42
Use [ngClass](http://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional) to add/remove a class that does a [180-degree css rotation](http://stackoverflow.com/questions/8939161/how-to-add-a-rotated-image-in-css). — Blazemonger, Sep 10 '14 at 13:47
http://stackoverflow.com/questions/18840253/how-do-you-rotate-image-in-angularjs — cameron, Sep 10 '14 at 13:58

score 0 · Accepted Answer · answered Sep 10 '14 at 18:25

You can make use of ng-class over here, no need to write your custom directive

Your span would look like this:

<span ng-class="{'glyphicon-chevron-down':!clicked,'glyphicon-chevron-right':clicked,'glyphicon':true}">

Where clicked is a $scope variable which will track when the button is being clicked

Working Example

Toggle Directive in AngularJS

1 Answers1