Angular - 如何通過路由器將信息傳遞給控制器？

數據庫表格：Angular - 如何通過路由器將信息傳遞給控制器？

-------------------------------------------------------------------- 
| ID | PARENT ID | TITLE   | URL       | 
-------------------------------------------------------------------- 
| 1 | 0   | Programming  | programming     | 
-------------------------------------------------------------------- 
| 2 | 1   | Logic   | programming/logic    | 
-------------------------------------------------------------------- 
| 3 | 1   | Object-Oriented | programming/oop    | 
-------------------------------------------------------------------- 
| 4 | 2   | PROLOG   | programming/logic/prolog  | 
-------------------------------------------------------------------- 
| 5 | 2   | LISP   | programming/logic/lisp  | 
-------------------------------------------------------------------- 
| 6 | 3   | JAVA   | programming/oop/java   | 
-------------------------------------------------------------------- 
| 7 | 3   | C#    | programming/oop/csharp  | 
--------------------------------------------------------------------

頁面設置：

<html> 
    <body> 
     <nav ng-controller="navController"> 
      <ul ng-repeat="menuItem in menuItems"> 
       <li><a href="#/{{menuItem.URL}}">{{menuItem.Title}}</a></li> 
      </ul> 
     </nav> 

     <div ng-view> 
     </div> 
    </body> 
</html>

說明：

我的導航菜單是從數據庫查詢派生的，其中的鑽取導航一次只顯示一個級別。

第一個級別只顯示一個菜單項：

<ul> 
    <li> 
     <a href="#/programming">Programming</a> 
    </li> 
<ul>

如果我點擊「程序」鏈接，導航現在將顯示該菜單項的孩子：

<ul> 
    <li> 
     <a href="#/programming/logic">Logic</a> 
    </li> 
    <li> 
     <a href="#/programming/object-oriented">Object-Oriented</a> 
    </li> 
</ul>

假設：

（1）假設每個這些菜單項有相應的部分。例如，「面向對象」菜單項在「/partials/objectoriented.html」中有相應的部分。（2）假設我有一個GetMenuItemsByUrl（url）函數，它會根據它的url返回一個菜單項的所有子項。例如，如果我通過URL「編程/邏輯」，該函數將返回第2行的所有子節點，第4行和第5行。此函數可以通過/ api/GetMenuItemsByUrl /訪問：url

預期行爲：

假設用戶進入下面的網址： mywebsite.com/#/programing

（1）將NAV應該呈現這樣：

登錄IC
面向對象

（2）視圖應加載模板：/templates/programming.html

問：

我知道如何呈現該視圖基於通過路由器的路線。我的問題是，我怎麼也傳遞當前網址到navController並告訴它重新綁定？

來源

2014-01-31 Dushan Perera

創建一個跟蹤當前菜單的服務？它會在navController中自動更新，因爲服務是單例。 – Dieterg

看我做了基於我對你的問題的理解jsbin link

爲了實現路由的無限嵌套，你可以創建一個catch與

$routeProvider 
.when('/:url*', {templateUrl: function(args) { 
    return 'programming.tpl.html'; 
}, controller:'NavController'});

這所有的路線會得到整個URL作爲可以傳遞給控制器$ routeParams.url屬性設置了一個param。

app.controller('NavController', function($scope, $routeParams, MenuService) { 
    $scope.menuItems = MenuService.getMenuItems($routeParams.url); 
    ... 
}

和MenuService應該處理從url中獲取菜單項的所有邏輯。

示例非常簡單，並且對驗證和網址到項目映射的功能有限。隨時提出更具體的問題。

來源

2014-01-31 09:57:38

謝謝你的答案和例子！如果頁面不僅僅是一個靜態模板，而且還需要一個自己的控制器呢？我想我的問題的本質是基於單一路線，我如何將信息傳遞給兩個單獨的非嵌套控制器？對不起，我對Angular很新，並且很難制定我的問題。「 –

」如果頁面不僅僅是一個靜態模板，而且還需要一個自己的控制器？「控制器可以添加到模板中的一個模板中，使用'ng-controller'指令或者在' .when狀態的定義。不應該創建單獨的控制器，因爲只有菜單項不同。所以你可以使用一個控制器，它將接收菜單項作爲參數，並根據這些參數改變它的行爲。 –

「我如何將信息傳遞給兩個單獨的非嵌套控制器」通過使用'.factory'或'.service'方法創建的分離服務。你可以爲你需要的所有控制器注入一個'$ routeParams'服務。他們都將訪問數據。如果你需要共享一個自定義數據，你應該創建一個存儲服務，把這些數據放到那裏並注入你的控制器 –

要達到此目的，您需要在控制器中使用$ routeParams。

標記：

<a href="#/route/{{vm.org.id}}" class="btn btn-success">

RouteProvider配置：

url: '/route/:id

在你的控制器

：

的例子

var routeId = $routeParams.id

來源

2014-01-31 09:27:39 zpydee

我試過這個，但我的控制器沒有重新綁定，當我改變路線時，只有當我第一次加載應用程序。 –

Angular - 如何通過路由器將信息傳遞給控制器​​？

回答

相關問題

Angular - 如何通過路由器將信息傳遞給控制器？