AngularJS : router : load view manually from withi

Question

Is there a way of manually loading the view from within the controller, after say some animation was triggered first? The scenario I have is the previous page content sliding up, after that the view would be updated when being off-the screen and once ready - slides back down with the new view from the new controller.

I've got already the router set up, but it just instantly replaces the view whenever the new controller is called.

Any fiddle if possible please?

Answer 1

Code in Controller shouldn't manipulate DOM, directives should. Here is directive to prevent preloading content of element with "src" (by browser's parser) and show content of element only after loading, and before loading show splash with spinner:

directive('onloadSrc', function($compile) {
 return function(scope, element, attrs) {
  element.bind('load', function() {
    var parent = $compile(element[0].parentElement)(scope);
    if (!element.attr('src') && attrs.onloadSrc) {
      element.attr("src", attrs.onloadSrc);
      // replace this dirty hardcode with your template for splash spinner                                          
      var spinner_div = $compile('<div style="z-index: 100; width: '+element.attr('width')+'px; height: '+element.attr('height')+'px; display:block; vertical-align:middle;"><img src="/img/spinner.gif" style="position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px;"/></div>')(scope);
      attrs.onloadSrc = "";
      parent.prepend(spinner_div);
      element.css("display", 'none');
      attrs.xloading = spinner_div;
    }
    else {
     if (attrs.xloading) {
      attrs.xloading.remove();
      attrs.xloading = false;
      element.css("display", 'block');
    }
   }
 }
);
}});

To use this directive, leave empty attribute src of element and fill attribute onload-src.

Answer 2

Angular has animations build in in unstable branch, which should perfectly fit your scenario. Just check out http://www.nganimate.org/angularjs/tutorial/how-to-make-animations-with-angularjs. ng-view directive has build in 'enter' and 'leave' animations. Check you this sample: http://jsfiddle.net/nFhX8/18/ which does more less what you'd like to achieve.