I use angular in the application along with ui-router. I want to be able to execute some code when the ui-view animation is complete. I read that $ stateChangeSuccess should be able to achieve this, but it seems to fire before every animation. Right now I'm using $ timeout with a time equal to the duration of the animation. I know this is not a good solution. Does anyone have a better suggestion on how to fix this?
This is my code so far (directive):
app.directive('lazyBackground', ['$timeout', function($timeout) { return { restrict: 'A', link: function(scope, element, attrs) { var img = new Image(); img.onload = function() { element.css({ 'background-image': 'url(' + this.src + ')' }); element.addClass('lazy-loaded'); } $timeout(function() { img.src = attrs.lazyBackground; },500); } } }]);
As you can see from the code, I'm trying to be lazy to load the image AFTER the completion of the new ui-view animation.
source share