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

问题描述

我正在使用具有多个命名视图的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，
控制器：create-claim-controller
} 
} 
}）
 .state（portal.history，{
 url：/ history，
 views：{
'history'：{
 templateUrl：partials / history.html，
 controller：history-controller 
} 
 } 
}）
 / *其他子州* / 
  

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

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

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

解决方案

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

问题

无论什么时候刷新该页面，如果视图（html文件）包含 md-tabs 指令它将重定向到第一个选项卡（第0个索引）。现在这些选项卡的索引从 0开始到length-1 。因此，如果您希望默认选项卡为3，则可以使用 md-selected 属性 md-tabs 指令但您是要求基于URL以动态方式设置它。

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

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

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

示例

首先我们定义服务

  var Session = function（）{
 this.setIndex = function（index）{
 this.index = index; 
}; 
 
 this.getIndex = function（）{
返回this.index？ this.index：0; 
}; 
}; 
 
 Session。$ inject = []; 
 angular.module（'tempApp'）。service（'Session'，Session）; 
  

路线文件

  .state（portal，{
 url：/，
 templateUrl：partials / header.html，
 controller：TempController
解析：{
 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 ，
次观看：{
'历史'：{
 templateUrl：part ials / history.html，
 controller：history-controller，
 resolve：{
 temp：function（Session）{
 Session.setIndex（2）; 
} 
} 
} 
} 
  

view file：

 < 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）; 
  

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          */

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.

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.

Problem

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.

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.

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

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.

Example

first we define a 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);

routes file

.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");
                            }
                 }
        }
    }

view file:

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

TempController for that

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

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