我为我的应用程序使用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

09-20 23:26