StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The normal operation of the route system is for the <code>$route</code> service to watch for the <code>$locationChangeSuccess</code> event and then begin loading a route. When it's done loading the template, performing the resolve steps and instantiating the controller it then in turn broadcasts a <code>$routeChangeSuccess</code> event. That <code>$routeChangeSuccess</code> is monitored by the <code>ng-view</code> directive, and that's how it knows to swap out the templates and scopes once the new route is ready.</p> <p>With all of the above said, it may work to have application code emulate the behavior of the <code>$route</code> service by updating the current route and emitting the route change event to get the view to update:</p> <pre><code>var errorRoute = $route.routes[null]; // assuming the "otherwise" route is the 404 // a route instance is an object that inherits from the route and adds // new properties representing the routeParams and locals. var errorRouteInstance = angular.inherit( errorRoute, { params: {}, pathParams: {}, } ); // The $route service depends on this being set so it can recover the route // for a given route instance. errorRouteInstance.$$route = errorRoute; var last = $route.current; $route.current = errorRouteInstance; // the ng-view code doesn't actually care about the parameters here, // since it goes straight to $route.current, but we should include // them anyway since other code might be listening for this event // and depending on these params to behave as documented. $rootScope.broadcast('$routeChangeSuccess', errorRoute, last); </code></pre> <p>The above assumes that your "otherwise" route doesn't have any "resolve" steps. It also assumes that it doesn't expect any <code>$routeParams</code>, which is of course true for the "otherwise" route but might not be true if you use a different route.</p> <p>It's unclear what of the above is depending on implementation details vs. interface. The <code>$routeChangeSuccess</code> event is certainly documented, but the <code>$$route</code> property of the route instance seems to be an implementation detail of the route system given its double-dollar-sign name. The detail that the "otherwise" route is kept in the route table with the key <code>null</code> is possibly also an implementation detail. So with all of this said, this behavior may not remain functional in future versions of AngularJS.</p> <p>For more information you could refer to <a href="https://github.com/angular/angular.js/blob/255e8c13cf0fd78f1c4d7c279be7bf47c2402956/src/ngRoute/directive/ngView.js#L201" rel="nofollow">the <code>ng-view</code> code that handles this event</a>, which is ultimately what the above code is trying to please, along with <a href="https://github.com/angular/angular.js/blob/255e8c13cf0fd78f1c4d7c279be7bf47c2402956/src/ngRoute/route.js#L532" rel="nofollow">the event emitting code</a> that I used as the basis for the above example. As you could infer from these links, the information in this post is derived from the latest master branch of AngularJS, which at the time of writing is labelled as 1.2.0-snapshot.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload