2017-01-20 26 views
0

は、だから私は2つのルートが設定されている:UI-ルータstateParamsの問題およびルーティング

$stateProvider.state('accounts', { 
    abstract: 'true', 
    url: "/accounts", 
    template: '<div ui-view></div>' 
}).state('accounts.view', { 
    url: "/:accountNumber", 
    views: { 
     '@': { 
      templateUrl: 'tpl/account/index.html', 
      controller: 'AccountController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 
     today: ['today', function (today) { 

      // Return todays date 
      return today(); 
     }], 
     tomorrow: ['tomorrow', function (tomorrow) { 

      // Return tomorrows date 
      return tomorrow(); 
     }], 
     lastMonth: ['lastMonth', function (lastMonth) { 

      // Return lastMonths date 
      return lastMonth(); 
     }], 
     account: ['$stateParams', 'AccountService', function ($stateParams, accountService) { 
      console.log('hi'); 
      return accountService.get($stateParams.accountNumber); 
     }] 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Account details' 
    } 
}).state('accounts.create', { 
    url: '/create', 
    views: { 
     '@': { 
      templateUrl: 'tpl/account/save.html', 
      controller: 'AccountSaveController', 
      controllerAs: 'controller' 
     } 
    }, 
    resolve: { 
     account: function() { 
      return {}; 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Create account' 
    } 
}).state('accounts.view.edit', { 
    url: '/edit', 
    views: { 
     '@': { 
      templateUrl: 'tpl/account/save.html', 
      controller: 'AccountSaveController', 
      controllerAs: 'controller' 
     } 
    }, 
    data: { 
     requireLogin: true, 
     pageTitle: 'Edit account' 
    } 
}) 

私はそれが正しいビューにナビゲートしますui-sref='accounts.create'で飾られたボタンをクリックして、それが中に決意を行おうとした場合accounts.view。 ACCOUNTNUMBER/作成と混同されている:がいるようです。 ページを更新すると、ビューが読み込まれずにアカウントの解決が試みられます。

私はこれを解決するために、いくつかの方法を試してみました。

アカウントをアカウントを表示するために作成/ - - アカウントと

を作成するための

アカウント/ ACCOUNTNUMBER:ACCOUNTNUMBER

アカウント/: 私はこのようなURLがしたいです/編集 - アカウント

を編集するためには、それはそのようなルートを設定することは可能ですか?

+0

あなたは** accounts /:accountNumber **と** accounts/create **を持つことができません。 https://github.com/angular-ui/ui-router/wiki/URL-routing#user-content-url-parameters ***で参照されているように***パラメータ名には単語文字(ラテン文字、数字、およびパターン内で一意である必要があります(パスと検索パラメータの両方で)。*** – Korte

+0

混乱を避けるため、編集ルートを 'accounts/edit /:accountNumber'に変更することができます。 –

答えて

0

accountNumberが実際に数値である場合、account.viewの状態をurl: "/{accountNumber:int}"と定義することができます。これにより、accounts/createが一致しなくなります。それ以外の場合は、カスタム正規表現を使用することができますdocs参照してください同じを達成する。

またGitHub issue便利かもしれません。

+0

アカウント番号は文字列ですが、文字で始まり数字であるため、正規表現は機能します – r3plica

+0

[AZ] {3} \ d {3}(\ d {4 })?角がぶつかることはありません。これは、英数字3文字、その後は3桁または7桁でなければならないことを示しています) – r3plica

関連する問題