我为我的应用程序使用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”,它可以正常工作。我有事吗请指教。
最佳答案
看来您用于编辑状态的网址可能会引起问题。默认情况下,子状态的Urll会附加到父状态的url,但是您使用的是完整路径。尝试将您的编辑网址更改为“ / edit /:userId”,该网址应自动从用户状态附加到“ / user”。现在,将插入符号'^'添加到编辑URL的开头也应该可以解决该问题,但这种情况没有多大意义。
Appended/Absolute URLs