How to trigger a controller function after an Animation in Angular JS

Question

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

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

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

Here is the 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>

Here is the animation

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();
      }
    }
  };
});

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;
    }
  }
};

})

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

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

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

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

I could extract the submitAnswer into a service, but then that would mean setting up a service definition that takes in all the scope data as it changes, there must be a better solution — Vishal Sakaria
– Vishal Sakaria, Commented May 27, 2014 at 11:12
If using JQuery is an option you could use $.animate. It accepts callback function to continue execution on completed animation. api.jquery.com/animate — Matas Vaitkevicius
– Matas Vaitkevicius, Commented May 27, 2014 at 11:33

Vishal Sakaria · Accepted Answer · 2014-05-28 14:36:22Z

2

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.

answered May 28, 2014 at 14:36

Vishal Sakaria

1,3971 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to trigger a controller function after an Animation in Angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related