Hey there! I'm new to Angular and I'm trying to create a button that will make an icon inside rotate 360 degrees when clicked. Right now, the entire button is rotating instead of just the element inside it. I want only the "blue square" to rotate when the button is clicked. (I know that currently the rotation is applied to the button itself because ng-click is on the button and not on the div.box)
Here's the HTML Code:
<button ng-controller="fullRotation" ng-click="fullRotate()">Rotate
<div class="box"></div>
</button>
And here's the NG Code:
var app = angular.module('app', []);
var fullRotation = function ($scope, $element) {
var degrees = 360;
$element.css('transition', '-webkit-transform 800ms ease');
$scope.fullRotate = function() {
$element.css('-webkit-transform', 'rotate(' + degrees + 'deg)');
degrees += 360;
};
}
If you want to see a demo, click here.