如何維護路線更改之間的視圖（控制器）狀態？

我有一個用AngularJS編寫的單頁應用程序，並使用ui-router來管理狀態轉換（路由）。如何維護路線更改之間的視圖（控制器）狀態？

沒有配置這樣的搜索狀態：

function config($stateProvider) { 
    $stateProvider 
    .state('social.search', { 
     url: '/search', 
     templateUrl: 'views/social/search/social-search-view.html', 
     controller: 'SocialSearchController', 
     controllerAs: 'vm' 
    }); 
}

該視圖生成一個表單，並且所述控制器（SocialSearchController）開獲得這些輸入，它們submiting到服務和顯示結果的照顧。結果列表顯示爲用戶排名列表（如Google的搜索結果頁面）。每個結果都有一個鏈接轉到一個新的狀態，以顯示有關條目的詳細信息，例如：

<a ui-sref="social.profile({personId: person.id})">{{person.name}}</a>

的social.profile狀態在應用程序的其他部分使用，所以它不是social.search孩子，其配置是這樣的：

function config($stateProvider) { 
    $stateProvider.state('social.profile', { 
    url: '/{personId}', 
    templateUrl: 'views/social/profile/social-profile-view.html', 
    controller: 'SocialProfileController', 
    controllerAs: 'vm' 
    }); 
}

它的工作很好，我可以輸入我的搜索，得到的結果，然後單擊以查看有關條目的詳細信息。但是，當我點擊後退按鈕從詳細視圖切換回搜索視圖時，我的輸入和搜索結果都消失了。我知道這是默認和正確的行爲，因爲如果不再使用控制器，則不需要將控制器保存在內存中。

的事情是，在這個特殊的情況下，我想控制器留在記憶莫名其妙，所以用戶不需要重新輸入查詢，並出具了搜索服務的另一個請求。

我能想到保存搜索狀態爲服務，使控制器從它抓住它的初始狀態，就像一個高速緩存服務只是爲了保存最後一個控制器的狀態。但後來我容易參與這個同步過程的錯誤，搜索形式是有點複雜，因爲它涉及到（我做了自定義指令）自動完成和標籤字段，以便將同步會通至少三個「層次」：控制器狀態，緩存服務，自定義輸入。

這是這樣做的正確方法？我有什麼選擇？

來源

2014-12-09 Thiago Negri

怎麼樣增加對您的搜索結果（「/搜索/ {}搜索字符串」）另一種觀點。您的表單將「提交」到該視圖，並且profliel視圖中的後退按鈕將起作用。 – richardtz 2014-12-09 12:41:06

我有比單個搜索字符串更多的字段，但我明白了你的觀點（保持路由url中的輸入狀態）。這將爲用戶避免重新鍵入而起作用，但會爲搜索服務（後端）重新填充結果列表提出新請求。 – 2014-12-09 12:48:42

我認爲再次提出請求是正確的，（例如，您可能會有新的結果顯示），但這可能取決於您的要求。 – richardtz 2014-12-09 13:32:22

我不知道，UI路由器是否保持父母與childstates之間的控制器和DATAS，但如果是這樣的話，你可以嘗試「複製」你的狀態。

function config($stateProvider) { 

var socialProfile = { 
    url: '/{personId}', 
    templateUrl: 'views/social/profile/social-profile-view.html', 
    controller: 'SocialProfileController', 
    controllerAs: 'vm' } 

    $stateProvider 
    .state('social.search', { 
     url: '/search', 
     templateUrl: 'views/social/search/social-search-view.html', 
     controller: 'SocialSearchController', 
     controllerAs: 'vm' 
    }); 
    $stateProvider.state("social.search.detail', socialProfile); 
    $stateProvider.state('social.profile', socialProfile); 
    }

在「social.search'視圖，然後你可能只是有一個特殊的HREF

<a ui-sref="social.search.detail({personId: person.id})">{{person.name}}</a>

在此配置您的socialProfile是搜索的一個子狀態，但仍然是一個獨立的狀態以及

來源

2014-12-09 13:34:14 kfis

這似乎工作，但我需要添加一個'ui-view'到父狀態來顯示詳細的視圖。就我而言，我希望這個孩子「ui-view」佔據整個視野。任何方式來做'ng-if'或者類似的東西來檢查是否有子狀態？ – 2014-12-09 13:40:36

如何維護路線更改之間的視圖（控制器）狀態？

回答

相關問題