0

我为我的应用程序使用 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' 和 'user' 部分正是列表状态的名称，然后单击编辑链接，ui-router 无法路由到编辑页面。如果我为“用户”选择一个没有层次结构的名称，比如“编辑”或“更改”来表示编辑状态，它就可以工作。此外，在添加路线的情况下，我将其命名为“添加”，它可以工作。我错了吗？请指教。

4

2 回答 2

4

看起来您的编辑状态 url 可能会导致问题。默认情况下，子状态的 URL 将附加到父状态的 url，但您使用的是完整路径。尝试将您的编辑网址更改为“/edit/:userId”，它应该自动从用户状态附加到“/user”。在您现在拥有的编辑网址的开头添加一个插入符号“^”也应该修复它，但在您的情况下没有多大意义。

附加/绝对 URL

于 2013-08-04T03:54:57.233 回答
0

如果要将表达式插入 URL，则需要使用特殊ng-href属性代替正则；href否则表达式将按字面意思处理。

于 2013-07-24T19:24:33.113 回答