多個視圖和更改網址

在我的用例中有三個，因爲沒有更好的單詞「views」。顯示在第三個視圖中的內容取決於在第二個視圖和第一個視圖中所做的選擇。同樣，第二個視圖中顯示的子主題取決於在第一個視圖中進行的選擇。多個視圖和更改網址

Select Topic | Select Subtopic | Display Content 
------------------------------------------------------ 
Vegetables | Apple   | The peach is a tasty 
FRUITS*  | Banana   | fruit that has a nice 
Meats  | PEACH*   | color, etc. 
Fish   |     |

當前，當用戶選擇一個主題時，我得到並顯示子主題列表。一旦用戶選擇了一個子主題，我就可以獲取並顯示內容。到目前爲止，這麼好。

唯一的問題，我也希望用戶能夠通過導航到一個網址的形式訪問此：

example.com/index.html#/topic/subtopic

我有工作，使得導航到URL會導致所有正確的內容被加載。這不是問題。

我的問題是，我想更改網址，如果用戶選擇新的主題或子主題。但是，如果沒有導致頁面重載（這似乎是，如果我用location.path我如何做到這一點會發生什麼？

來源

2014-07-06 Ben

您是否使用任何路由功能？ – Edminsson

我嘗試使用多個視圖的一個UI路由器狀態。但是當我試圖讓它重新加載一個視圖時，它總是重新加載整個狀態。所以我停止使用它，現在它全部在一個狀態。 – Ben

爲什麼使用'location.path'？你的意思是'$ location.path（）'？ – gkalpak

實現正是唯一的辦法是與UI的路由器，因爲據我所知。

隨着ngrouter，你必須改變你的params用於在查詢字符串參數，所以這將是這樣的：

example.com/index.html#/myRoute?topic=topic&subtopic=subtopic

然後在你的路由配置：

when('/myRoute', { templateUrl: ..., reloadOnSearch: false })

然後你會監聽控制器上路由（$ routeChangeSuccess）的變化，並從那裏獲取查詢字符串。

來源

2014-07-06 18:19:04 Diego

您不應該使用窗口的location.path，而是使用Angular的路由（通過$location.path()或隱式更改#hash）。

享有這樣的：

<!-- Categories --> 
<script type="text/ng-template" id="partials/categories.tmpl.html"> 
    <h3>Select a food category:</h3> 
    <ul> 
     <li ng-repeat="category in categories"> 
      <a ng-href="#/{{category.path}}">{{category.label}}</a> 
     </li> 
    </ul> 
</script> 

<!-- Fruits --> 
<script type="text/ng-template" id="partials/fruits.tmpl.html"> 
    <h3>Select a fruit:</h3> 
    <ul> 
     <li ng-repeat="fruit in fruits"> 
      <a ng-href="#/fruits/{{fruit.path}}">{{fruit.label}}</a> 
     </li> 
    </ul> 
    <a ng-href="#/{{back}}">Back</a> 
</script> 

<!-- Meats ---> 
... 

<!-- Vegetables --> 
... 

<!-- Description --> 
<script type="text/ng-template" id="partials/description.tmpl.html"> 
    <h3>{{item}}</h3> 
    <p>{{description}}</p> 
    <a ng-href="#/{{back}}">Back</a> 
</script>

適當的控制器和服務，這樣的配置：

function config($routeProvider) { 
    $routeProvider. 
     when('/', { 
      templateUrl: 'partials/categories.tmpl.html', 
      controller: 'categoriesCtrl' 
     }). 
     when('/fruits/:fruit?', { 
      templateUrl: function (params) { 
       return params.fruit ? 
         'partials/description.tmpl.html' : 
         'partials/fruits.tmpl.html'; 
      }, 
      controller: 'fruitsCtrl' 
     }). 
     when('/meats/:meat?', {...}). 
     when('/vegetables/:vegetable?', {...}). 
     otherwise({ 
      redirectTo: '/' 
     }); 
}

就可以達到你想要的！

還參見本short demo。

來源

2014-07-06 21:41:07 gkalpak

多個視圖和更改網址

回答

相關問題