UI路由器問題與stateParams和路由

，所以我有兩條路線設置：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與/創建混淆。如果我刷新了我的頁面，它不會加載視圖並仍嘗試解析該帳戶。

我試過很多方法來解決這個問題。我想有這樣的URL：

賬戶/：使用accountNumber - 查看帳戶

賬戶/創建 - 創建一個帳戶，並

賬戶/：使用accountNumber /編輯 - 編輯帳戶

是否可以設置這樣的路線？

來源

2017-01-20 r3plica

不確定您不能擁有**帳戶/：accountNumber **和** accounts/create **。正如在https://github.com/angular-ui/ui-router/wiki/URL-routing#user-content-url-parameters上引用***參數名稱可能只包含單詞字符（拉丁字母，數字和下劃線），並且在模式中必須是唯一的（跨路徑和搜索參數）*** – Korte

也許您可以將編輯路線更改爲'accounts/edit /：accountNumber'以避免混淆。 –

如果您的accountNumber確實是一個數字，您可以將您的account.view狀態定義爲url: "/{accountNumber:int}"。這將阻止accounts/create匹配它。否則，您可以使用一些自定義正則表達式，請參見docs以實現相同。

您可能還會發現GitHub issue有用。

來源

2017-01-20 10:42:06

帳號是一個字符串，但它以字母開頭，然後是數字，所以正則表達式可能工作 – r3plica

我想出了這個正則表達式：[AZ] {3} \ d {3}（\ d {4 }）？但它不會導致角度崩潰。這是說，必須有3個字母數字字符，然後只有3或7位數字） – r3plica

UI路由器問題與stateParams和路由

回答

相關問題