18

Does anyone know how to trigger an event when an angular route has rendered its view? I'd like to route the application and at the end of the template being rendered I would like it to trigger an event to slide the view "open", so that the User Experience isnt so harsh. When you click on a link the route chnages so quick. I basically want to make the User Experience smoother.

  1. click an image
  2. routes the application (but the view has a class of display none
  3. when the view is done loading then I want to trigger an event
  4. the event triggers a listener that makes my markup slide down and open up.

Any ideas?

Subtubes
  • 15,851
  • 22
  • 70
  • 105
  • 2
    [$viewContentLoaded](http://docs.angularjs.org/api/ng.directive:ngView#$viewContentLoaded) is close to what you want, but it will probably fire before all content is _rendered_ (especially if you are loading images). You could trying catching the $viewContentLoaded event, but then put your animation code into a $timeout callback function. Or you may have to write some JavaScript code that periodically checks to see if your images are loaded -- after you get the $viewContentLoaded event. – Mark Rajcok Mar 27 '13 at 21:43

1 Answers1

24

Does this do what you're after?

$scope.$on('$routeChangeSuccess', function () {
  // run some code to do your animations
});

Go to http://docs.angularjs.org/api/ and take a look at $route (LHS menu under ngRoute module)

Or take a look at this question I asked....AngularJS - Animate ng-view transitions

Community
  • 1
  • 1
Greg
  • 31,180
  • 18
  • 65
  • 85