AngularJS的可重复动画

Question

I'm using a custom directive to trigger an animation on an element when a specified field is blank on the page. As of now when a user clicks the button with my custom directive the animation will work, once. Clicking the button again will not fire the animation and I'm not sure why. I have attempted to use .then() with the $animate service however no luck.

Thanks in advance for any/all assistance.

 (function () { 'use strict' ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler]) function cfWobbler($animate, $parse) { var ret = { restrict: 'A', link: link } return ret; function link(scope, elem, attrs) { var el = document.getElementById('division-holder'); var fn = $parse(attrs['cfWobbler']); elem.on('click', function () { scope.$apply(function () { if (fn(scope) === '') { $animate.removeClass(el, 'bounceInDown'); debugger; $animate.addClass(el, 'wobbler', function () { $animate.removeClass(el, 'wobbler') }); } }); }); } } })(); 

I got it working however I have an error in my console. I know I've committed a big "No No" as far as Angular but I am not sure how else to do it.

Here is the error in my console.

Error: [$rootScope:inprog] $apply already in progress

Here's my working code.

 (function () { 'use strict' ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler]) function cfWobbler($animate, $parse) { var ret = { restrict: 'A', link: link } return ret; function link(scope, elem, attrs) { var el = document.getElementById('division-holder'); var fn = $parse(attrs['cfWobbler']); elem.on('click', function () { scope.$apply(function () { if (fn(scope) === '') { debugger; $animate.removeClass(el, 'bounceInDown'); $animate.removeClass(el, 'wobbler'); scope.$apply(); $animate.addClass(el, 'wobbler'); } }); }); } } })(); 

Answer 1

Got it working, sans error(s) in the console.

 (function () { 'use strict' ice.directive('cfWobbler', ['$animate', '$parse', cfWobbler]) function cfWobbler($animate, $parse) { var ret = { restrict: 'A', link: link } return ret; function link(scope, elem, attrs) { var el = document.getElementById('division-holder'); var fn = $parse(attrs['cfWobbler']); elem.on('click', function () { scope.$apply(function () { $animate.removeClass(el, 'bounceInDown'); $animate.removeClass(el, 'wobbler'); }); scope.$apply(function () { if (fn(scope) === '') { $animate.addClass(el, 'wobbler'); } }); }); } } })();