$ stateを使用して戻るボタン機能を実装します

Question

私のアプリケーションには複数の状態があります。

ワークフローは、ランディングページからアラートの一覧を表形式で表示するようなものです。そのリストから私は、特定のアラートの詳細な情報を提供するアラート詳細ページに私を連れてくるアラートを選択します。そのアラート詳細状態内には、特定のタブでクリックされたときにそのアラートのさまざまな側面を表示するナビゲーションタブの形式のサブビューがあります。

AlertView.config.js：

$stateProvider.state({ 
      name: "alert-details", 
      parent: "root", 
      abstract: true, 
      url: "/alert/details/:id", 
      params: { 
       // this will make both links /alert/details & /alert/details/ work 
       id: {squash: true, value: null} 
      }, 
      data: { 
       pageTitle: "Alert Details" 
      }, 
      views: { 
       "main.content@": { 
        templateUrl: "components/alerts/alert-details/alert-details.html", 
        controller: "AlertDetailsController as vm" 
       }, 
       "alertViewDetail@alert-details": { 
        templateUrl: "components/alerts/alert-details/overview/overview.html", 
        controller: "AlertDetailsOverviewController as vm" 
        //@todo parent/child controller. 
       } 
      }, 
     }).state({ 
      name: "alert-details.overview", 
      parent: "alert-details", 
      url: "/overview", 
      params: { 
       // this will make both links /alert/details & /alert/details/ work 
       id: {squash: true, value: null} 
      }, 
      data: { 
       pageTitle: "Alert Details" 
      }, 
      views: { 
       "alertViewDetail@alert-details": { 
        templateUrl: "components/alerts/alert-details/overview/overview.html", 
        controller: "AlertDetailsOverviewController as vm", 
        controllerAs: "vm" 
       } 
      } 
     }).state({ 
      name: "alert-details.history", 
      parent: "alert-details", 
      url: "/history", 
      params: { 
       // this will make both links /alert/details & /alert/details/ work 
       id: {squash: true, value: null} 
      }, 
      data: { 
       pageTitle: "Alert Details" 
      }, 
      views: { 
       "alertViewDetail@alert-details": { 
        templateUrl: "components/alerts/alert-details/history/history.html", 
        controller: "AlertDetailsHistoryController", 
        controllerAs: "vm" 
       } 
      } 
     }).state({ 
      name: "alert-details.trigger", 
      parent: "alert-details", 
      url: "/trigger-events", 
      params: { 
       // this will make both links /alert/details & /alert/details/ work 
       id: {squash: true, value: null} 
      }, 
      data: { 
       pageTitle: "Trigger Events" 
      }, 
      views: { 
       "alertViewDetail@alert-details": { 
        templateUrl: "components/alerts/alert-details/trigger-events/trigger-events.html", 
        controller: "AlertDetailsTriggerEventsController", 
        controllerAs: "vm" 
       } 
      } 
     }).state({ 
      name: "alert-details.all-fields", 
      parent: "alert-details", 
      url: "/all-fields", 
      params: { 
       // this will make both links /alert/details & /alert/details/ work 
       id: {squash: true, value: null} 
      }, 
      data: { 
       pageTitle: "All Alert Fields" 
      }, 
      views: { 
       "alertViewDetail@alert-details": { 
        templateUrl: "components/alerts/alert-details/all-fields/all-fields.html", 
        controller: "AlertDetailsAllAlertFieldsController", 
        controllerAs: "vm" 
       } 
      } 
     }); 

Page.config.js

$stateProvider.state({ 
      name: "alert-view", 
      parent: "root", 
      url: "/alert/view?id&name&criteria&start&end&targets&sort", 
      data: { 
       pageTitle: "Alert View" 
      }, 
      views: { 
       "main.content@": { 
        templateUrl: "components/alerts/alert-view/alert-view.html", 
        controller: "AlertViewsController", 
        controllerAs: "vm" 
       } 
      } 

アラートの詳細alertDetail.html

<button ng-click="vm.goBack()" class="btn btn-default"><i class="icon icon-long-arrow-left"></i><span translate>Back</span></button> 

alertDetail.controller.js

vm.goBack = function() { 
      history.back(); 
     }; 

私の目的は、いずれのサブビューにもかかわらず、戻るボタンをクリックすると、警告ビューページに移動するように、アラート詳細ページに戻るボタンを実装することです。私はそのためにhistory.back（）を使ってみました。しかし、Alert Viewページに直接ルーティングするのではなく、以前のすべての状態を通過します。 必要なシナリオを実装するために、[アラートビュー]ページと[アラート詳細]ページの状態情報をどのように活用する必要がありますか。助けてください。

Answer 1

現在のURLを保存して後で使用する問題を解決するために、URLのクエリ文字列を単一のオブジェクトとして取り込むサービスを作成しました。その後、同じ状態でそのURLに移動する必要があるときは、そのクエリ文字列オブジェクトを使用して$ stateのパラメータとして渡します。 ようvm.goBack関数は次のようになります

vm.goBack = function() { 
      $state.go("alert-view", {name: alertHistory.getHistory().name, criteria: alertHistory.getHistory().criteria, sort: alertHistory.getHistory().sort}); 
     }; 

iが作成したサービスであった： は（関数（）{ "厳格な使用";

angular 
    .module("app.alerts") 
    .service("alertHistory", alertHistory); 

alertHistory.$inject = [ 
    "$location", 
    "logger"]; 



function alertHistory ($location, logger) { 
    var historyURL = { 
     init: null, 
     saveURL: saveURL, 
     getHistory: getHistory 
    }; 
    return historyURL; 

    function saveURL (urlObj) { 
     historyURL.currentURL = urlObj; 
    } 
    function getHistory() { 
     return historyURL.currentURL; 
    } 
} 

}）（）;コントローラで

私は（$のlocation.searchを使用してクエリ文字列を取得）：

alertHistory.saveURL($location.search()); 

これは理想的なソリューションではないかもしれません。しかし、それは私が必要なもののために働く:)任意の提案は大歓迎です！

Answer 2

すべての状態をルートスコープアレイに格納することができます。

$rootScope.statesInfo = ['alert-details.overview','alert-details.history',....]; 

ユーザーが戻るボタンを押して、現在の状態を確認し、前の状態に進みます。あなたはこれを使用して現在の状態を取得することができます

：$ state.current.name

例えるとバック前の状態で行きますシンプル。

angular.forEach($rootScope.statesInfo,function (val,key) { 
         if ($state.current.name == val) { 
          $state.go($rootScope.statesInfo[key-1]); 
         } 
        });