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中的切換指令

回答

相關問題