AngularJs UI的路由器 - 页面刷新$ state.current现在是空的 [英] AngularJs UI-Router - Page Refresh $state.current is now empty

问题描述

我有一个采用了棱角分明应用 UI路由器，我有问题，每当我刷新页面。我使用嵌套的意见，将命名视图构建应用程序。每当我刷新页面， UI路由器不加载当前状态和刚刚离开页面空白。

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.

在页面加载 $ state.current 等于

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

我读从以.json 文件我的导航通过 $ HTTP ，并通过国家循环。所以这是我能显示：

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

这code获取嵌套JSON对象的每个项目执行。如果有其他任何将是有益的，让我知道。

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

推荐答案

有一个问题： AngularJS - UI路由器 - 如何配置动态视图，提供一个答案，它展示了如何做到这一点。

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

这是怎么回事？在刷新时，网​​址评估越早，那么状态注册。我们不得不推迟了。而解决方案是由 UI-路由器本机的功能 deferIntercept（推迟）

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)

由于在doc说：

禁用 （或允许）的推迟位置改变拦截。

Disables (or enables) deferring location change interception.

如果你想自定义同步URL的行为（例如，如果你想推迟一个过渡，但保持当前的URL），调用在配置时此方法。然后，在运行时，调用 $ urlRouter.listen（）您已经配置了自己的 $ locationChangeSuccess 事件处理程序之后。

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在配置阶段处理：

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

})

我们将重新启用，在.RUN（）阶段，一旦我们配置的所有动态状态从JSON：

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

有一个 plunker 的从链接问答集一个

这篇关于AngularJs UI的路由器 - 页面刷新$ state.current现在是空的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！