javascript - AngularJS 自定义动画指令

Question

假设我正在创建一个名为“shakeIt”的指令。当发出信号时，该指令应该向它所应用的元素添加一个类，在动画完成后，它应该删除该类。

在不使用事件的情况下向其发出“摇动”(添加类)信号的最佳方式是什么(我不喜欢使用事件，除非它是一个打算在全局范围内广播/发射的事件)。

谢谢:)

Answer 1

使用作用域上的属性来跟踪动画的状态。然后将该属性传递给您的指令:

<div shake-it="myScopeProp" duration="4000"></div>

指令可能是这样的:

app.directive('shakeIt', ['$timeout', function($timeout){
  return {

    link: function($scope, $ele, $attr){
      $scope.$watch($attr.shakeIt, function(shaking){
        $ele.toggleClass('someClass', shaking);

        if(shaking){
          $timeout(function(){
            $scope[$attr.shakeIt] = false;
          }, $attr.duration);
        }
      });
    }
  }
}]);