AngularJs UI-Router - Page Refresh $state.current is now empty

问题:

I have an Angular application using ui-router and I am having issues whenever I refresh the page. I am using nested views, named views to build the application. Whenever I refresh the page, ui-router doesn't reload the current state and just leaves the page blank.

On page load $state.current is equal to

Object {name: "", url: "^", views: null, abstract: true} 

I am reading my navigation from a .json file via $http and looping through the states. So this is what I can show:

stateProvider.state(navElement.stateName, {     url: navElement.regexUrl ? navElement.regexUrl : url,     searchPage: navElement.searchPage,   //something custom i added     parent: navElement.parent ? navElement.parent : "",     redirectTo: navElement.redirectTo,     views: {         'subNav@index': {             templateUrl: defaults.secondaryNavigation,             controller: 'secondaryNavigationController as ctrl' //static         },         'pageContent@index': {             template: navElement.templateUrl == null                                                ? '
'                                                : undefined,             templateUrl: navElement.templateUrl == null                                                ? undefined                                                : navElement.templateUrl,             controller: navElement.controller == null                                                ? undefined                                                : navElement.controller + ' as ctrl'         }     } }); 

This code gets executed for each item in the nested json object. If there is anything else that would be helpful, let me know.

回答1:

There is a question: AngularJS - UI-router - How to configure dynamic views with one answer, which shows how to do that.

What is happening? On refresh, the url is evaluated sooner, then states are registered. We have to postpone that. And solution is driven by UI-Router native feature deferIntercept(defer)

$urlRouterProvider.deferIntercept(defer)

As stated in the doc:

Disables (or enables) deferring location change interception.

If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.

In a nutshell, we will stop URL handling in config phase:

app.config(function ($urlRouterProvider) {    // Prevent $urlRouter from automatically intercepting URL changes;   // this allows you to configure custom behavior in between   // location changes and route synchronization:   $urlRouterProvider.deferIntercept();  }) 

And we will re-enable that in .run() phase, once we configured all dynamic states from JSON:

.run(function ($rootScope, $urlRouter, UserService) {    ...      // Once the user has logged in, sync the current URL     // to the router:      $urlRouter.sync();      // Configures $urlRouter's listener *after* your custom listener     $urlRouter.listen(); }); 

There is a plunker from the linked Q & A

回答2:

I don't know how are all your routes.. but if you refresh a page of a child state, you need to pass all parameters of the parents states to be resolved correctly.

文章来源: AngularJs UI-Router - Page Refresh $state.current is now empty