Как перезагрузить ту же страницу в браузере refre sh в angularjs - PullRequest
Новая
       4

Как перезагрузить ту же страницу в браузере refre sh в angularjs

1 голос
/ 01 марта 2020

У меня есть панель 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)
});

Когда я обновляю браузер sh, он всегда возвращает меня к USER LANDING PAGE независимо от того, где я обновляю sh. Но в браузере refre sh мне нужно перезагрузить страницу, на которой я находился до обновления.

1 Ответ

1 голос
/ 01 марта 2020

Вы можете использовать хранилище сеансов для сохранения последнего состояния. Внутренний фрагмент кода не позволяет использовать сессионное хранилище. Рабочий пример на 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);
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs/release/angular-ui-router.min.js"></script>

<body ng-app="app">

  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...