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

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/35961740/ui-router-state-redirecting-to-first-child-on-page-refresh