Question

在将动画序列和控制器动作串联在一起时，我已陷入停滞状态。

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

我已完成步骤1＆amp; 2，只需要完成最后一点。

这是Button

<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 ，但确实获得了应用应得的UX。

最后，我想要一种在动画完成后触发控制器中的 submitAnswer 功能的方法。

Answer 1

您可以使用

获取元素的$ scope

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

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

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

1 个答案: