I have implemented a custom directive to trigger an animation on an element when a specific field is empty on the page. However, I am facing an issue where the animation only works once when the user clicks the button with the directive. Subsequent clicks do not trigger the animation, and I'm struggling to figure out why that is happening. I tried using .then() with the $animate service but had no success.
Thank you in advance for any assistance provided.
(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 was able to get it working, but now I am encountering an error in my console. I am aware that what I did goes against best practices in Angular, but I'm unsure of how else to approach it.
Here is the error message from my console:
Error: [$rootScope:inprog] $apply already in progress
Below is my updated code snippet:
(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');
}
});
});
}
}
})();