javascript - AngularJS 中的切换指令

Question

我正在尝试做类似于 this SO question 的事情.但是，我需要在 AngularJS 中执行此操作。当有人点击它时，我需要为按钮旋转 180 度设置动画。如果按钮处于事件状态，我需要逆时针旋转它。如果它不活动，我需要顺时针旋转。

我了解指令的基础知识。但是，我不明白如何将 CSS 动画与我的指令集成。我想我需要使用链接功能。即使那样，我也不确定该怎么做。目前，我有:

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

我的想法是，当我需要使用指令时，我会做这样的事情:

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

我走在正确的轨道上吗？我觉得我很接近。然而，随着 AngularJS 的加入，发生了一些我还没有完全理解的事情。但是，我觉得我正在尝试做一些在 jQuery 中很容易的事情。我没有提示。我只是想了解如何让它以 Angular 方式工作。

谢谢!

Answer 1

您可以在这里使用 ng-class，无需编写自定义指令

你的跨度看起来像这样:

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

clicked 是一个 $scope 变量，它将跟踪按钮何时被点击

Working Example