顺时针旋转Icon 360度angularjs

Question

在这里有角的新手，我试图创建一个按钮，一旦单击它，按钮内将有一个图标旋转360度。 到目前为止，我已经旋转了，但是它旋转了整个按钮，而不仅仅是元素。 当单击按钮时，它看起来只是旋转“蓝色方块”。 （是的，我知道到目前为止，由于ng-click位于按钮上，而div.box上没有任何内容，所以按钮本身只能旋转）

HTML代码：

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

NG代码

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

演示

Answer 1

这是父母寻找孩子的简单答案。

对于以后想要这个答案的任何人，我将所有.css（）移至fullRotate函数中并添加了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;

};

仅演示 Chrome

Answer 2

单击蓝框时只有蓝框旋转

 <button >Rotate

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

  </button>

单击按钮时只有蓝色框旋转

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

另一种方法是向按钮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;
  };