AngularJS UI路由器不适用于嵌套视图
[英]AngularJS ui-router doesn't work with nested views
问题描述
I user ui-router for my application. 
我为我的应用程序使用ui-router。 In my application, click User navigation bar will navigate to a screen for a list of users. 在我的应用程序中，单击“用户”导航栏，将导航到用户列表的屏幕。 At this screen, if clicking a user it goes to User Edit screen, if clicking New User button it goes to Add User screen. 在此屏幕上，如果单击用户，则转到“用户编辑”屏幕，如果单击“新用户”按钮，则转到“添加用户”屏幕。 I route them as below: 我将其路由如下：
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>
The problem raises with naming state for edit route. 该问题与编辑路径的命名状态有关。 If I choose name 'user.edit' with 'user' part is exactly the name of list state, then click edit link, ui-router can't route to edit page. 如果我选择“用户”部分的名称“ user.edit”恰好是列表状态的名称，则单击“编辑链接”，ui-router无法路由到编辑页面。 If I choose a name without hierachy to 'user', say 'edit' or 'change' for edit state, it works. 如果我选择的名称不带有“用户”名称，则说“编辑”或“更改”以表示编辑状态，则该名称有效。 Also, in case of add route, I name 'add', it works. 另外，在添加路由的情况下，我将其命名为“ add”，它可以正常工作。 Am I wrong something? 我有事吗 Please advice. 请指教。
2 个解决方案
解决方案1
4 已采纳 2013-08-04 03:54:57
It looks like your url for the edit state might be causing problems. 看来您用于编辑状态的网址可能会引起问题。 Urls of child states will be appended to the url of the parent state by default, but you're using the full path. 默认情况下，子状态的Urls会附加到父状态的url，但是您使用的是完整路径。 Try changing your edit url to just '/edit/:userId', which should automatically be appended to '/user' from the user state. 尝试将您的编辑网址更改为仅'/ edit /：userId'，该网址应自动从用户状态附加到'/ user'。 Adding a caret '^' to the beginning of the edit url you have now should also fix it, but doesn't make as much sense in your case. 现在，将插入符号'^'添加到编辑URL的开头也应该可以解决该问题，但这种情况没有多大意义。
解决方案2
0 2013-07-24 19:24:33
You need to use the special ng-href attribute in place of the regular href if you're going to be interpolating expressions into the URL; 如果要将表达式内插到URL中，则需要使用特殊的ng-href属性代替常规href 。 otherwise the expression will be treated literally. 否则，该表达式将按字面意义处理。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.