Question

目前，我将状态网址定义为：
... /：表/编辑/：ID 的
- ＆GT;因此，两个网址：
... / products / edit / 5 ＆amp;的 ... / notValidTable /编辑/ 5 按以下定义加载我的tableEdit状态：

tableEdit.state.js：

angular.module(‘myApp')

.config(function($stateProvider) {

  $stateProvider
    .state('tableEdit', {
      url: '/:table/edit/:id',
      templateUrl: ‘../table_edit/table_edit.html',
      controller: 'TableEditCtrl'
    });
});

问：我知道tableEdit中的'table'参数应该只是以下之一：'产品'，'提供商'，'客户'，'关键字＆＃39;或“主题”，如何限制其状态可以加载的值？

这是我的解决方案，但我希望能够提供反馈或更好地解决这个问题：

app.js：

angular.module(‘myApp', [
    'ui.router',
])

.config(
  ['$urlRouterProvider',
  function($urlRouterProvider) {

  $urlRouterProvider
    .when('/:table/edit/:id', ['$match', '$state',
        function($match, $state) {
        if ($match.table !== 'products' 
        && $match.table !== 'providers' 
        && $match.table !== 'customer' 
        && $match.table !== 'keywords' 
        && $match.table !== 'topics') { 

            $state.transitionTo('tablesHome'); 
       }  else { 
            $state.transitionTo('tableEdit', $match, true); }
       }
    }
  ])
  .otherwise('/home');
])

是否有更好的方法来限制tableEdit＆＃39; s表格的可能值：table＆＃39;参数，以便我的页面被适当地重定向为无效的参数值？

非常感谢。

Answer 1

您可以在路线参数上加上正则表达式。这是一个有效的例子：

＆＃13;

var app = angular.module('myApp', [
    'ui.router',
])

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
  $stateProvider
    .state('table', {
      // this is the important bit. 
      // it will restrict this route to only 'products' and 'customers
      url: '/{table:products|customers}' 
    })
    .state('table.edit', {
      url: '/edit/:id',
    template: "<h1>TABLE</h1>"
    })
    .state('home', {
      url: '/*path',  // special 'catch all route',
      template: "<h1>HOME</h1>"
  });
 
  $urlRouterProvider.otherwise('/home'); 
}]);

app.run(['$rootScope', '$state', function($rootScope, $state) {
  $rootScope.$state = $state;
}])

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <script data-require="ui-router@0.2.13" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    
    <a href="#/products/edit/5">/products/edit/5</a><br/>
    <a href="#/customers/edit/5">/customers/edit/5</a><br/>
    <a href="#/not-a-table/edit/5">/not-a-table/edit/5</a><br/>    
    <a href="#/this-is-a-random-url">/this-is-a-random-url</a><br/>
    <div ui-view=""></div>
    
    <pre>
      <!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams -->
      $state = {{$state.current.name}}
      $params = {{$state.params}}
      $state full url = {{ $state.$current.url.source }}
    </pre>
  </body>

</html>

＆＃13;

https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters

限制与AngularJS状态匹配的动态URL参数的最佳方法

1 个答案: