AngularJS中的切换指令

我正在尝试做类似于this SO question的操作。不过，我需要在AngularJS中做到这一点。当有人点击它时，我需要动画180度按钮的旋转动画。如果按钮处于活动状态，则需要逆时针旋转它。如果它不活动，我需要顺时针旋转。AngularJS中的切换指令

我了解指令的基础知识。但是，我不明白如何将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中做一些简单的事情。我没有抱怨。我只是想了解如何让这个以角度方式工作。

谢谢！

来源

2014-09-10 user687554

按钮时，同样可以在这里使用ngClass无需指令来完成。 – V31 2014-09-10 13:42:51

https://docs.angularjs.org/guide/animations – 2014-09-10 13:42:53

@ V31怎么样？我很想了解如何做到这一点。 – user687554 2014-09-10 13:45:33

你可以在这里使用纳克级的，无需编写自定义指令

你的跨度应该是这样的：

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

如果点击是$范围变量，它会跟踪被点击

Working Example

来源

2014-09-10 18:25:05 V31

AngularJS中的切换指令

回答

相关问题