UI-Router:页面刷新时状态重定向到第一个孩子 [英] UI-Router : State redirecting to first child on page refresh

问题描述

我正在使用具有多个命名视图的 UI 路由器开发 AngularJS 应用程序.我的应用程序在 index.html 中有一个 ui-view，状态配置为:

I am working on an AngularJS app using UI router with multiple named views. My app has one ui-view in index.html and states are configured as :

$stateProvider
    .state('login', {
        url : '/',
        templateUrl : "partials/login.html",
        controller : "login-controller"
    })
    .state("portal", {
        url :"",
        abstract : true,
        templateUrl : "partials/header.html",
    })
    .state("portal.create-claim", {
        url : "/dashboard",
        views : {
            'create-claim' : {
                    templateUrl : "partials/create-claim.html",
                    controller : "create-claim-controller"
            }
        }
    })
    .state("portal.history", {
        url : "/history",
        views : {
            'history' : {
                templateUrl : "partials/history.html",
                controller : "history-controller"
            }
        }
    })
    /*          Other child states          */

我在标题中使用有角度的材料标签进行导航.特定于每个选项卡的数据插入 header.html 中提供的命名视图中，因此我将门户"状态设为抽象，将创建声明"和历史"状态设为其子状态.

I am using angular material tabs in the header for navigation. Data specific to each tab is plugged in the named view provided in header.html, hence I have made "portal" state as abstract and "create-claim" and "history" state as its child states.

现在，当我在标签历史记录上时，url 是:http://localhost:8082/history 并刷新在浏览器中，应用程序从 portal.history 变为 portal.create-claim 状态.我知道 Angular 应用程序是 SPA 和页面刷新引导整个应用程序，但在刷新之前，如果 url 指向历史状态，那么刷新后它应该进入历史状态.我尝试使用 $stateChangeStart 事件进行调试.我发现该应用程序确实进入portal.history"状态，但随后立即重定向到抽象状态的第一个子状态"，即portal.create-claim".我通过将portal.history"作为第一个孩子并将portal.create-claim"作为第二个孩子来确认此问题，然后将portal.history"作为最终重定向状态.

Now when I am on tab history, url is : http://localhost:8082/history and refresh the browser, app goes from portal.history to portal.create-claim state. I understand that Angular apps are SPA and page refreshing bootstraps entire app but before refresh, if the url was pointing to history state, then after refresh it should go to history state. I tried to debug using $stateChangeStart event. I found that app indeed goes to "portal.history" state but then immediately redirects to 'first child state' of abstract state i.e. "portal.create-claim". I confirmed this issue by making "portal.history" as first child and "portal.create-claim" as second child, then it goes to "portal.history" as the final redirected state.

我无法弄清楚这个问题.我正在尝试为我的应用处理页面刷新.谁能帮帮我?

I can't figure out the issue. I am trying to handle page refresh for my app. Can anyone help me out?

推荐答案

这个过程有点棘手，但它是有效的.我只是检查我自己的代码.

This process is kind of tricky but It is working. I just check with my own code.

问题

问题是每当您 refresh 页面时，如果 view(html file) 包含 md-tabs 指令，它将重定向到第一个选项卡(第 0 个索引).现在这些标签的索引从 0 到 length-1.因此，如果您想要一个默认选项卡为 3，您可以使用 md-tabs 指令的 md-selected 属性，但您要求根据 URL 以动态方式设置它.

The thing is whenever you refresh the page if the view(html file) contains md-tabs directive it will redirect to the 1st tab(0th index). Now these tabs have index starting from 0 to length-1. So if you want a default tab to 3 you can use md-selected attribute of md-tabs directive but you are asking for setting this in a dynamic way based upon the URL.

因此，首先我们在主控制器中定义一个 $scope 变量并将其分配给 md-selected.主控制器是指与portal状态关联的控制器.如果不存在则需要定义.

So for that first we define a $scope variable in our main controller and assign that to md-selected. The main controller means the controller associated with portal state.If it does not exist then you need to define it.

现在，如果您为每个选项卡和不同的 URL 使用 ui-view，则每次都会调用相应的控制器.

Now If you are using ui-view for each tab and different URL that appropriate controller will be called each time.

问题因此，如果您不在默认索引页面并刷新页面，您将被重定向到默认索引，但将执行该 URL 的 ui-route's resolve.因此，您需要将适当的索引传递给该主控制器，为此我们可以使用 service，因为它适用于整个应用程序.

Problem So if you are not at your default index page and you refresh the page you will be redirected to default index but ui-route's resolve of that URL will be executed. So you need to pass appropriate index to that main controller and for that we can use service since it is availabe appication-wide.

示例

首先我们定义一个服务

var Session = function () {
    this.setIndex = function(index) {
        this.index = index;
    };

    this.getIndex = function() {
        return this.index ? this.index : 0 ;
    };
};

Session.$inject = [];
angular.module('tempApp').service('Session', Session);

路由文件

.state("portal", {
    url :"/",
    templateUrl : "partials/header.html",
    controller: "TempController"
     resolve: {
               temp: function (Session) {
                Session.setIndex("0");
                }
              }

})
.state("portal.create-claim", {
    url : "dashboard",
    views : {
        'create-claim' : {
                templateUrl : "partials/create-claim.html",
                controller : "create-claim-controller",
                resolve: {
                           temp: function (Session) {
                                Session.setIndex("1");
                            }
                 }
        }
    }
})
.state("portal.history", {
    url : "history",
    views : {
        'history' : {
            templateUrl : "partials/history.html",
            controller : "history-controller",
            resolve: {
                           temp: function (Session) {
                                Session.setIndex("2");
                            }
                 }
        }
    }

查看文件:

<md-tabs md-selected="tabIndex">
    ....
</md-tabs>

用于那个的TempController

TempController for that

var TempController = function (Session) {
    this.tabIndex = Session.getIndex();
};
TempController.$inject = ['Session'];
angular.module('tempApp').controller('TempController', TempController);

这篇关于UI-Router:页面刷新时状态重定向到第一个孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！