如何在angularjs中刷新浏览器时重新加载同一页面

Question

我有一个nav栏，当我单击nav栏中的任何标签时，它将带我到该标签。

<section id="tabs">
    <div class="mob-nav"> 
        <div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist"> 
            <!-- N add new class nav-tabs-scroll -->
            <a class="nav-item nav-link" style="padding-top: 10px;"
               ng-class="{ active: $index == 0 }"
               id="nav-{{menuTab.menuURL}}-tab"
               data-toggle="{{menuTab.dataToggle}}"
               data-target="#{{menuTab.menuURL}}"
               href="#{{menuTab.menuURL}}" role="tab"
               aria-controls="nav-{{menuTab.menuURL}}"
               ng-repeat="menuTab in menuList">
            </a>
        </div>
    </div>
</section>

<!-- Tab Details -->
<section id="tabs">
    <div class="">
        <div class="">
            <div class="mb-d-150">
                <div class="tab-content py-3 px-sm-0 pl-0 pr-0"
                     id="nav-tabContent"> 
                    <!-- N removed py-3 class -->
                    <div class="tab-pane fade show"
                         ng-class="{ active: $index == 0 }"
                         id="{{menuTab.menuURL}}" role="tabpanel"
                         data-target="#{{menuTab.menuURL}}"
                         aria-labelledby="nav-{{menuTab.menuURL}}-tab"
                         ng-include="menuTab.colDef"
                         ng-repeat="menuTab in menuList">
                    </div>
                    <div class="tab-pane fade" id="changepass" role="tabpanel"
                         aria-labelledby="nav-about-tab"
                         ng-include="changePasswordTemplate">
                    </div>
                </div>    
            </div>
        </div>
    </div>
</section>

这里是menuList的示例。

[{
    menuID: "USER LANDING PAGE"
    caption: "Dashboard"
    parent: "root"
    menuURL: "exampleModal"
    cssClass: "fas fa-cog fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "customerLandingPageTemplate"
    SlNum: 98
    colDef: "/js/templates/user-landing-page.html"
    menuList: []
    dataToggle: "modal"
},{
    menuID: "USER QUERIES"
    caption: "USER QUERIES"
    parent: "root"
    menuURL: "user-queries"
    cssClass: "fas fa-comment-alt fa-lg"
    cssParent: "nav navbar-nav"
    aClass: "userQueriesTemplate"
    SlNum: 100
    colDef: "/js/templates/user-queries.html"
    menuList: []
    dataToggle: "tab"
}]

这里是angularjs部分，它给了我menuList：

GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
    $scope.menuList = data;
    console.log($scope.menuList)
});

当我刷新浏览器时，无论我在哪里刷新，它总是带我回到USER LANDING PAGE。但是在刷新浏览器时，我需要在刷新之前重新加载页面。

Answer 1

您可以使用会话存储来保存上一个状态。内部代码段不允许使用会话存储。工作中的example on JSBin。

angular.module('app', ['ui.router'])
  .config(($stateProvider) => {
    const helloState = {
      name: 'hello',
      url: '/hello',
      template: '<h3>hello world!</h3>'
    }

    const aboutState = {
      name: 'about',
      url: '/about',
      template: '<h3>Its the UI-Router hello world app!</h3>'
    }

    $stateProvider.state(helloState);
    $stateProvider.state(aboutState);
  })
  .run(($state, $transitions) => {
    $transitions.onSuccess({}, transition => {
      sessionStorage.setItem('lastState', transition.to().name);
    });
    const lastState = sessionStorage.getItem('lastState');
    if (lastState) {
      $state.go(lastState);
    }
  })