gpt4 book ai didi

javascript - Angular - 如何通过路由器将信息传递到 Controller ?

转载 作者:行者123 更新时间:2023-11-28 08:33:56 25 4
gpt4 key购买 nike

数据库表:

--------------------------------------------------------------------
| 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/#/programing

(1) 导航应如下呈现:

  • 逻辑
  • 面向对象

(2) View 应加载模板:/templates/programming.html

<小时/>

问题:

我知道如何根据路由器的路线渲染 View 。我的问题是,如何将当前 url 传递给 navController 并告诉它重新绑定(bind)?

最佳答案

看看我根据我对你的问题的理解所做的例子 jsbin link

要实现路由的无限嵌套,您可以使用以下命令创建捕获所有路由

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

这将获取整个 url 作为参数,该参数可以作为 $routeParams.url 属性传递给 Controller ​​。

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

并且 MenuService 应该处理从 url 获取菜单项背后的所有逻辑。

示例非常简单,并且有关验证和 url 到项目映射的功能有限。欢迎提出更具体的问题。

关于javascript - Angular - 如何通过路由器将信息传递到 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21473597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com