I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and clockwise if inactive.
While I grasp the fundamentals of directives, I'm struggling with incorporating CSS animations into my approach. I believe that utilizing the link function is key, yet implementation remains unclear. Presently, I have:
myApp.directive('toggle', [function() {
return {
restrict:'A',
controller: function($scope) {
$scope.isActive = true;
},
link: function (scope, element) {
if (scope.isActive) {
// apply counter-clockwise rotation via CSS
} else {
// revert button to original position with clockwise rotation
}
scope.isActive = !scope.isActive;
}
};
}]);
My plan is to use the directive like so:
<button **toggle** class="btn btn-link"><span class="glyphicon glyphicon-upload"></span></button>
Am I headed in the right direction? Progress feels promising, yet nuances arising from integrating AngularJS give rise to uncertainty. Despite the challenges, I'm determined to master an Angular-friendly solution even though accomplishing this task would be simpler with jQuery. Your guidance is greatly appreciated!
Thank you!