如何在 Angular JS 中的动画之后触发控制器功能 [英] How to trigger a controller function after an Animation in Angular JS

问题描述

在将一系列动画和控制器动作串联在一起方面，我陷入了停滞状态.

I have come to a standstill in terms on threading together a sequence of Animations and then a controller action.

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

What I basically want to do is basically 1. click on a button/div, 2.Trigger an Animation, 3. Once animation is complete run a function in a controller that resets the button/div

我已完成步骤 1 &2 并且只需要完成最后一点.

I have completed steps 1 & 2 and just need to get the last bit done.

这是按钮

<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

And here is the last step the controller, I want the trigger the submitAnswer function inside this controller, after the animation has finished. The main bit is 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

I have tried writing the ng-click in the HTML like so

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

然后在 submintAnswer 函数上设置 $timeout，但确实获得了应用程序应得的 UX.

and then setting a $timeout on the submintAnswer function, but does really get the UX the app deserves.

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

Again ultimately I want a way to trigger the submitAnswer function in the controller after the animation is completed.

推荐答案

你可以使用，

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

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

Though there are some problems with syncing the scope if this happens.

这篇关于如何在 Angular JS 中的动画之后触发控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！