2015-02-11 91 views
0

我有3種嵌套的狀態:角路由和國家處理問題

$stateProvider 
     .state('A', {      
      url: '/a', 
      templateProvider: function ($templateCache) { 

       return $templateCache.get('pages/a.html'); 
      }, 
      controller: 'aController' 
     }) 

     .state('A.B', { 
      url: '/b', 
      templateProvider: function ($templateCache) { 

       return $templateCache.get('pages/b.html'); 
      } 
      controller: 'bController' 
     }) 

     .state('A.B.C', { 
      url: '/c',      
      templateProvider: function ($templateCache) { 

       return $templateCache.get('pages/c.html'); 
      }, 
      controller: 'cController' 
     }) 

比方說,一個是應用程序的初始狀態。現在,當在狀態A中點擊狀態B的鏈接時,調用$ state.go('。B',...),狀態B必須從A獲取參數,因此它可以使用該參數調用某個服務並呈現數據。

同樣,當狀態C點擊一個鏈接狀態B,C必須得到B組參數,因此它可以做正確的工作和顯示數據。

第一個問題:

什麼是要通過這些參數上下行的最佳方式?嵌套控制器是否錯誤,以便父範圍在子範圍中可見?還是應該將它們作爲參數傳遞?

第二個問題(一種依賴於回答第一個):

應如何HTML模板來構造(尤其是關於對「用戶界面視圖」指令),瀏覽器,所以當返回按鈕在來自B之後的狀態C上被點擊,模板B的控制器不被觸發,以便狀態B顯示與在進入狀態C之前相同的數據而不重新加載。

如果用戶已經做出瞭如下轉變:未來將其從A.

第三個問題後,這同樣適用於點擊回到狀態B A-> B-> C,然後導航至一些不相​​關的狀態D(例如,通過點擊主菜單上的鏈接),然後在狀態D中按下後退按鈕,由於沒有輸入參數,我該如何防止控制器C崩潰?

四問題(有關第三):

前提:唯一的「正確」的方式來獲得狀態B是通過點擊狀態A,同樣獲得到C用戶必須通過先A-> B。

那麼,如何做我處理當用戶手動輸入,例如URL B,從一些零散狀態d?再次,因爲B沒有輸入參數,所有的東西都會崩潰。

謝謝。

回答

0

第一,第三和第四個問題可以通過在你的狀態的url上使用參數來解決。例如,狀態A.B的URL可以是/ b?x & y & z而不是just/b。然後從A到AB過渡,你可以使用:

$state.go('A.B', {x: "val1", y: "val2", z: "val3"}); 

這樣就解決了,因爲你傳遞參數,從A到B的第一個問題這解決了第三個問題,因爲從返回後的狀態ABC不會散架另一個狀態,因爲URL歷史記錄包含參數。很明顯,這種方法將如何解決用戶直接在地址欄中輸入URL的第四個問題。

問題2提出了一個稍微要解決的問題。但是你可以做的是在A和B之間引入一箇中間狀態,其唯一目的是防止當按下後退按鈕時重新加載狀態A的控制器。

.state('A', { 
      abstract: true,      
      url: '/a', 
      templateProvider: function ($templateCache) { 

       return $templateCache.get('pages/a.html'); 
      }, 
      controller: 'aController' 
     }) 
.state('A.int', { 

      url: '/a/view', 
      template: <div></div>, 
      controller: 'aIntermediateController' 
     }) 
     .state('A.int.B', { 
      url: '/b', 
      templateProvider: function ($templateCache) { 

       return $templateCache.get('pages/b.html'); 
      } 
      controller: 'bController' 
     }) 

通知,我做了狀態的抽象,讓你不能直接導航到它。相反,您直接導航到A.int。當您最初加載狀態A.int時,aController將在aIntermediateController執行之前執行一次。隨後,任何狀態更改爲A.int將只執行一個IntermediateController。這就是你可以防止多次運行控制器的原因。 同樣,您可以用相同的方式在狀態B和C之間添加中間視圖。

+0

感謝您的洞察力,其中一些可能會有所幫助。 – 2015-02-12 08:16:14

+0

再次問候。在玩了一段時間之後,我有一個後續問題:如果我不能/不想使用url params,但是狀態定義的params屬性呢?在這種情況下,我會在後退按鈕上丟失參數。我可以實現某種緩存特定狀態的參數,我可能會這樣做,但如果你知道更好的方法,請分享。謝謝。 – 2015-02-13 11:18:01

+0

基本上,您嘗試記住頁面的狀態,並在導航到頁面時通過其他頁面或直接通過地址欄記住該狀態。回顧一個頁面之間導航的狀態很容易,因爲您可以輸入一些信息來構造狀態。但是,如果您不使用URL參數,那麼當用戶通過地址欄導航到頁面時,如何輸入構建狀態? – restassured 2015-02-13 15:18:21