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」部分が正確にリスト状態の名前である名前「user.edit」を選択した場合、編集リンクをクリックすると、ui-router は編集ページにルーティングできません。「ユーザー」に階層のない名前を選択すると、編集状態に対して「編集」または「変更」と言うと、機能します。また、ルートを追加する場合は、「add」と名前を付けますが、機能します。私は何か間違っていますか？ご意見をお聞かせください。

4

2 に答える 2

0

URL に式を補間する場合ng-hrefは、通常の属性の代わりに特別な属性を使用する必要があります。hrefそれ以外の場合、式は文字どおりに扱われます。

于 2013-07-24T19:24:33.113 に答える