AngularJS UI路由器不适用于嵌套视图
[英]AngularJS ui-router doesn't work with nested views
问题描述
我为我的应用程序使用ui-router。 在我的应用程序中，单击“用户”导航栏，将导航到用户列表的屏幕。 在此屏幕上，如果单击用户，则转到“用户编辑”屏幕，如果单击“新用户”按钮，则转到“添加用户”屏幕。 我将其路由如下：
1. home.html
<html ng-app="app">
<head>
</head>
<body>
<div ng-controller="MainCtrl">
<ul>
<li ><a href="#">Home</a></li>
<li ><a href="#/user">List Users</a></li>
<li ><a href="#/products">List Products</a></li>
</ul>
</div>
<div >
<div ui-view></div>
</div>
</div>
<script src="angular.js"></script>
<script src="angular-ui-router.js"></script>
</body>
</html>
2. app.js
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/user')
$stateProvider.
state('user',
{url: '/user', templateUrl: 'views/user-list.html', controller: UserListController}).
state('user.edit',
{url: '/user/edit/:userId', templateUrl: 'views/user-edit.html', controller: UserEditController}).
state('add',
{url: '/user/add', templateUrl: 'views/user-add.html', controller: UserAddController})
});
3. user-list.html
<div>
<ul>
<li ng-repeat="user in userList ">
<a href="#/user/edit/{{user.uid}}">{{user.name}}</a>
</li>
</ul>
</div>
<div>
<a href="#/user/add"><button>New User</button></a>
</div>
该问题与编辑路径的命名状态有关。 如果我选择“用户”部分的名称“ user.edit”恰好是列表状态的名称，则单击“编辑链接”，ui-router无法路由到编辑页面。 如果我选择的名称不带有“用户”名称，则说“编辑”或“更改”以表示编辑状态，则该名称有效。 另外，在添加路由的情况下，我将其命名为“ add”，它可以正常工作。 我有事吗 请指教。
2 个解决方案
解决方案1
4 已采纳 2013-08-04 03:54:57
看来您用于编辑状态的网址可能会引起问题。 默认情况下，子状态的Urls会附加到父状态的url，但是您使用的是完整路径。 尝试将您的编辑网址更改为仅'/ edit /：userId'，该网址应自动从用户状态附加到'/ user'。 现在，将插入符号'^'添加到编辑URL的开头也应该可以解决该问题，但这种情况没有多大意义。
解决方案2
0 2013-07-24 19:24:33
如果要将表达式内插到URL中，则需要使用特殊的ng-href属性代替常规href 。 否则，该表达式将按字面意义处理。
使用angularjs中的ui-router嵌套视图
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.