5

I'm using angular in an app together with ui-router. I wish to be able to execute some code, when the animation of the ui-view is complete. I've read that $stateChangeSuccess should be able to achieve this, but it seems to fire before each animation. At the moment I'm using $timeout with the time being equal to the animation duration. I know this is not a very good solution. Anyone have a better suggestion 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 lazy load a image AFTER the new ui-view animation is complete.

Michael Falck Wedelgård
  • 2,943
  • 1
  • 27
  • 39
  • I'm looking for a hook to do something similar, and the closest I've found so far is this: **[AngularJS css animation + done callback](http://stackoverflow.com/questions/20828681/angularjs-css-animation-done-callback)** – Laust Deleuran Nov 04 '15 at 13:23

0 Answers0