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.html中提供的命名视图中，因此我制作了＆＃34; portal＆＃34;陈述抽象和＆＃34;创造 - 索赔＆＃34;和＆＃34;历史＆＃34;作为其子女的国家。

现在，当我处于标签历史记录时，url为：http://localhost:8082/history并刷新浏览器，app从portal.history转到portal.create-claim状态。我知道Angular应用程序是SPA和页面刷新bootstraps整个应用程序但在刷新之前，如果url指向历史状态，那么在刷新之后它应该进入历史状态。我尝试使用$ stateChangeStart事件进行调试。我发现应用确实进入了＆＃34; portal.history＆＃34;状态，但然后立即重定向到第一个孩子的状态＆＃39;抽象状态，即＆＃34; portal.create-claim＆＃34;。我通过制作＆＃34; portal.history＆＃34;来证实了这个问题。作为第一个孩子和＆＃34; portal.create-claim＆＃34;作为第二个孩子，然后它进入＆＃34; portal.history＆＃34;作为最终的重定向状态。

我无法弄清楚这个问题。我正在尝试为我的应用处理页面刷新。任何人都可以帮助我吗？

Answer 1

这个过程有点棘手，但它正在发挥作用。我只想查看我自己的代码。

问题

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

首先，我们在主控制器中定义一个$scope变量并将其分配给md-selected。主控制器意味着与portal状态相关联的控制器。如果它不存在则需要定义它。

现在，如果您对每个标签使用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>

那个

的TempController

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

UI-Router：在页面刷新时将状态重定向到第一个子节点

1 个答案: