Question

数据库表：

--------------------------------------------------------------------
| 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“programming / logic”，该函数将返回第2行的所有子节点，即行4和5。此函数可通过/ api / GetMenuItemsByUrl /：url

访问

预期行为：

假设用户输入以下网址： mywebsite.com /＃/编程

（1）导航应该如下呈现：

逻辑
面向对象

（2）视图应加载模板：/templates/programming.html

问题：

我知道如何通过路由器根据路径呈现视图。我的问题是，我如何将当前的url传递给navController并告诉它重新绑定？

Answer 1

要实现这一点，您需要在控制器中使用$ routeParams。

标记：

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

RouteProvider配置：

url: '/route/:id

在您的控制器中：

var routeId = $routeParams.id

Answer 2

根据我对您的问题jsbin link

的理解，查看我制作的示例

要实现路线的无限嵌套，您可以使用

创建捕获所有路径

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

这会将整个url作为一个param，可以作为$ routeParams.url属性传递给控制器。

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

MenuService应该处理从网址获取菜单项背后的所有逻辑。

示例非常简单，并且在验证和URL到项目映射方面的功能有限。随意提出更具体的问题。

Angular - 如何通过路由器将信息传递给控制器？

2 个答案:

Angular - 如何通过路由器将信息传递给控制器​​？

2 个答案:

Angular - 如何通过路由器将信息传递给控制器？