AngularJs UI-路由器 - 页面刷新 $state.current 现在是空的

Question

我有一个使用 ui-router 的 Angular 应用程序，每当我刷新页面时都会遇到问题。我正在使用嵌套视图、命名视图来构建应用程序。每当我刷新页面时，ui-router 不会重新加载当前状态，只会将页面留空。

在页面加载时 $state.current 等于

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

我正在通过 $http 从 .json 文件中读取我的导航并循环浏览状态。所以这就是我可以展示的：

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 
                                              ? '<div class="emptyContent"></div>' 
                                              : undefined,
            templateUrl: navElement.templateUrl == null 
                                              ? undefined 
                                              : navElement.templateUrl,
            controller: navElement.controller == null 
                                              ? undefined 
                                              : navElement.controller + ' as ctrl'
        }
    }
});

此代码针对嵌套 json 对象中的每个项目执行。如果还有什么有用的，请告诉我。

Answer 1

有一个问题：AngularJS - UI-router - How to configure dynamic views 有一个答案，显示了如何做。

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)

如文档中所述：

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.

简而言之，我们将在配置阶段停止 URL 处理：

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();
 
})

一旦我们从 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();
});

有个plunker from the linked Q & A

Answer 2

我不知道你所有的路由如何..但是如果你刷新一个子状态的页面，你需要传递父状态的所有参数才能正确解析。

AngularJs UI-路由器 - 页面刷新 $state.current 现在是空的

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

angularjs

angular-ui-router

$urlRouterProvider.deferIntercept(defer)