UI-Router ：页面刷新时状态重定向到第一个 child

Question

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

$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 中的 angular material 选项卡进行导航。每个选项卡的特定数据插入 header.html 中提供的命名视图中，因此我将 "portal" 状态设为抽象状态，将 "create-claim" 和 "history" 状态设为其 child 状态。

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

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

Answer 1

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

问题

如果 view(html file) 包含 md-tabs 指令，那么每当您 refresh 页面时，它都会重定向到第一个选项卡（第 0 个索引）。现在这些选项卡的索引从 0 to length-1 开始。因此，如果您希望默认选项卡为 3，您可以使用 md-tabs 指令的 md-selected 属性，但您要求根据 URL.

以动态方式设置它

因此，首先我们在主控制器中定义一个 $scope 变量并将其分配给 md-selected。主控制器是指portal state.If关联的控制器不存在，需要自己定义。

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

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

例子

首先我们定义一个服务

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>

用于那个的温度控制器

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

UI-Router ：页面刷新时状态重定向到第一个 child

UI-Router : State redirecting to first child on page refresh

javascript

angularjs

angular-ui-router

angular-material