如何在Angular JS中的动画之后触发控制器功能

Question

在将一系列动画和控制器动作串联在一起方面，我已经停滞不前了。

我基本上想做的基本上是 1.单击按钮/div，2.触发动画，3.动画完成后，在控制器中运行重置按钮/div的函数

我已经完成了第 1 步和第 2 步，只需要完成最后一步。

这是按钮

<button ng-class="{'clicked':clicked, 'correct' : answer.answer == 'correct' }"
        ng-click="clicked = true"
        ng-repeat='answer in answers'
        type="button"
        class="btn btn-answers answer-animation">
          {{ answer.es }}
</button>

这是动画

app.animation('.answer-animation', function(){

  return {
    beforeAddClass: function(element, className, done){

      if (className === 'clicked') {
        if( $(element).hasClass('correct') ){
          $(element).addClass('animated bounce');
        } else {
          $(element).addClass('animated wobble');
        }
      }
      else {
        done();
      }
    }
  };
});

这是控制器的最后一步，我希望在动画完成后触发控制器内部的 submitAnswer 函数。主要的一点是submitAnswer

app.controller('Game', function($scope, $http, $location, QA, Rounds ) {
//Reset all QA buckets
QA.reset();

$scope.round = 1;
$scope.playing = true;

QA.setUpGameData();
$scope.answers = QA.answers();
$scope.question = QA.question();

$scope.submitAnswer = function(question, answer){
  if($scope.round <= Rounds) {
    if(question.en === answer.en){
      $scope.round++;

      QA.setUpGameData();
      $scope.answers = QA.answers();
      $scope.question = QA.question();

      if($scope.round === Rounds + 1){
        $scope.playing = false;
        $scope.message = 'Amazing well done!';
        $scope.score = ($scope.round-1) * 1000;
      }
    }
    else {
      $scope.playing = false;
      $scope.message = 'Sorry Wrong Answer :(';
      $scope.score = ($scope.round-1) * 1000;
    }
  }
};

})

我尝试过像这样在 HTML 中编写 ng-click

ng-click="clicked = true;submitAnswer(question, answer)"

然后在 submintAnswer 函数上设置 $timeout，但确实获得了应用程序应得的用户体验。

最终我还是想要一种方法来在动画完成后触发控制器中的 submitAnswer 函数。

Answer 1

您可以使用 $scope 获取元素的，

var $scope = angular.element(element).scope();

如果发生这种情况，同步范围会出现一些问题。