1
votes

Angular newbie here, I am trying to create a button that will have an icon inside of it rotate 360 degrees once click on. As of now I have the rotate but it rotates the whole button instead of just the element. Looking to just have it rotate the "blue square" when the button is clicked. (And yes I understand as of now I am only having the button itself rotate due to ng-click being on the button and nothing on the div.box)

HTML Code:

<button ng-controller="fullRotation" ng-click="fullRotate()">Rotate
     <div class="box"></div>
</button>

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

demo

2

2 Answers

1
votes

It was the simple answer of a parent looking for their child.

For anyone looking for this answer in the future I moved all .css() into the fullRotate function and added children()

$scope.fullRotate = function() {
     console.log('im here');
     $element.children().css('transition', '-webkit-transform 800ms ease');
     $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)');
     degrees += 360;

};

demo Chrome only

0
votes

only blue box rotate when you click blue box

 <button >Rotate

    <div class="box" ng-controller="fullRotation" ng-click="fullRotate()"></div>

  </button>

Only blue box rotate when you click button

  $scope.fullRotate = function() {
    console.log('im here');
    $element.children().css('transition', 'transform 800ms ease');
    $element.children().css('transform', 'rotate(' + degrees + 'deg)');
    degrees += 360;
  };

other way is to add transition to button css

/* Styles go here */
.box{
    width: 70px;
    height: 70px;
    background: skyblue;
    margin: 50px;
    display: block;
    transition: 800ms ease;
}


 $scope.fullRotate = function() {
    $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)');
    degrees += 360;
  };