如何角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.Trigger一个动画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;
    }
  }
};

}）

我曾尝试写NG-点击

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

，然后设置一个 $超时的 submintAnswer 的功能，但真正得到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.

推荐答案

您可以用获取元素的$范围，

You can get the $scope of an element using,

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

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

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

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