I have hit a roadblock trying to connect a series of animations with a controller action.
My goal is to: 1. click on a button/div, 2. Trigger an animation, 3. Once the animation finishes, execute a function in the controller to reset the button/div.
I've accomplished steps 1 & 2 and now just need to tackle the final piece.
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 to trigger the submitAnswer function inside this controller after the animation concludes. The crucial part 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 = 'Congratulations!';
$scope.score = ($scope.round-1) * 1000;
}
}
else {
$scope.playing = false;
$scope.message = 'Sorry! Wrong Answer.';
$scope.score = ($scope.round-1) * 1000;
}
}
};
})
I have attempted adding the ng-click in the HTML like this
ng-click="clicked = true;submitAnswer(question, answer)"
and then using a $timeout on the submintAnswer function, but it didn't provide the intended user experience for the app.
Ultimately, my goal is to find a way to trigger the submitAnswer function in the controller after the animation completes.