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}">

点击的是$ scope变量，它将跟踪点击按钮的时间

Working Example

在AngularJS中切换指令

1 个答案: