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.