0

I'm currently working on a small Angular app which is being used on phones.

The ng-view holds the view and navigation between views is animated (simple sliding).

I'd like to wait for the animation to complete before I start loading in data from the remote server. Unfortunately I can't find a good event or handle to hook into.

Angular version: 1.3.15

Any help would be welcome.

Thanks in advance.

Groulien
  • 59
  • 6

1 Answers1

0

So now that we are in Angular 1.4 this may not matter anymore. But what I've done in the past (and it may not be right) is to fire a broadcast event inside my animation. This is only really viable when using a JS animation, not CSS.

.animation('.slider', function() {
  return {
    beforeRemoveClass: function() {
      // Do your animation, when the JS is done (via callback) example:
      new TweenMax(element, 1, {left: 50}, function() {
        // this is the callback from the JS animation, announce it's done
        $rootScope.$broadcast('animationDone');
      });
    }
  }

Now your controllers can listen for the animationDone announcement and call the server.

This is how I've done it. It may not be the best way but it works. I'm open to hear what others have done. Now that I'm on version 1.4, I'm trying to use the promise stuff they have in place. (which is why I'm on stackoverflow today).

Chris
  • 1,418
  • 2
  • 16
  • 34