Изменить контроллер для использования/принятия параметров URL в AngularJS

Question

У меня есть способ сделать раздел данных и отправить его на новую вкладку самостоятельно.

Проблема прямо сейчас заключается в том, что это происходит в приложении AngularJS, и URL остается неизменным. Поэтому, если я «открываю новую вкладку» в элементе «Аккаунты» или элемент «Клиенты», URL-адрес остается прежним (app/#/apiTab). Я бы хотел, чтобы URL-адрес изменился на что-то вроде app/#/apiTab?Method=Accounts&Version=1.0 или app/#/apiTab?Method=Customers&Version=2.3. Чтобы пользователь мог скопировать/вставить это кому-то, они могут подключить его и получить один и тот же результат в своем браузере.

Я не уверен, насколько это возможно.

Вот мой текущий макет.

apiTab.html (нижняя страница выше - новая вкладка, которая открывается)

<div ng-controller="apiTabController"> 
    <div class="panel panel-info"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     {{data.uri}} 
     </h4> 
    </div> 
    <div class="panel-body"> 
     <table class="table"> 
     <tr ng-repeat="method in data.methods"> 
      <td>{{method.name}}</td> 
      <td>{{method.desc}}</td> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 

Отрывок из моей api.html (главная страница выше - показаны элементы, которые вы можете открыть в новых вкладках)

<div class="tab-pane active" id="tab1"> 
<div ng-repeat="api in apiList[0].accounts"> 
    <div class="panel panel-info" id="panel1"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-target="#collapseAccountsV{{$index}}" class="collapsed"> 
      {{api.uri}} 
      </a> 
      <i class="newTab" ng-click="apiTab(api)">(Open in new tab)</i> 
     </h4> 
     </div> 
     <div id="collapseAccountsV{{$index}}" class="panel-collapse collapse"> 
     <div class="panel-body"> 
      <table class="table"> 
       <tr ng-repeat="method in api.methods"> 
        <td>{{method.name}}</td> 
        <td>{{method.desc}}</td> 
       </tr> 
      </table> 
     </div> 
     </div> 
    </div> 
</div> 

apiController.js (передавать данные sessionStorage)

angular.module('app').controller('APIController', ['$scope', '$location', 'APIMethodService', function($scope, $location, APIMethodService) { 
    $scope.title = "API"; 
    $scope.apiList = APIMethodService.apis; 

    $scope.apiTab = function(apiData) { 
     sessionStorage.setItem("apiData", JSON.stringify(apiData)); 
     window.open("#/apiTab"); 
    }; 
}]); 

apitabController.js (Напряжения данные sessionStorage на новой вкладке)

angular.module('app').controller('apiTabController', ['$scope', function($scope) { 
     var retrieved = sessionStorage.getItem("apiData"); 
     $scope.data = JSON.parse(retrieved); 
}]); 

Вопрос: Как я могу настроить это до необязательно получать и отображать параметры URL-адреса, чтобы пользователь мог использовать URL-адрес, чтобы перейти прямо к определенному разделу API, а не щелкнуть его в главном файле api.html.

Answer 1

Поскольку вы храните эти данные в sessionStorage, вы могли бы:

1. Сохранить apiData в sessionStorage
2. Изменить их $ location.path
3. Проверить sessionStorage на $routeChangeStart, чтобы увидеть, если apiData хранится
4. При сохранении, необходимо восстановить apiData, а затем удалить из сеансаStore

Вероятно, не идеальный ...