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

Question

我有一个使用 ui-router 的 Angular 应用程序，每当我刷新页面时都会遇到问题。我正在使用嵌套 View 、命名 View 来构建应用程序。每当我刷新页面时，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() 阶段重新启用它:

.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来自链接 Q & A