限制与AngularJS状态匹配的动态URL参数的最佳方式
Best way to restrict dynamic URL parameters matched to an AngularJS state
当前我有一个状态url定义为:
…/:表/edit/:id
->因此,两个URL:
…/products/edit/5&…/notValidTable/edit/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'
});
});
Q-据我所知,tableEdit中的":table"参数应仅为"products"、"providers"、"customer"、"keywords"或"topics"中的一个,如何限制其值可供我的状态加载?
这是我的一个解决方案,但我希望得到反馈或更好的方法来解决这个问题:
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的":table"参数的可能值,以便为无效的参数值适当重定向我的页面?
非常感谢。
您可以在路由参数上添加正则表达式。下面是一个工作示例:
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;
}])
<!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>
https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-参数
相关文章:
- 以角度管理动态URL
- javascript在动态Url中匹配并添加字符串
- 在angular.js中定义动态URL的重定向
- 对使用 Ajax 捕获的动态 url 响应
- jQuery UI中的动态url,数据表
- 限制与AngularJS状态匹配的动态URL参数的最佳方式
- URL重写Node js-动态URL
- 如何构造用于骨干路由的动态url
- Facebook选项卡应用程序动态URL
- 使用ui路由器实现动态URL路由的最佳方式是什么
- 如何从json文件中的基本url生成动态url
- 如何从JSON文件中读取动态url
- 带有标签的动态url的社交共享
- 基于表单输入生成动态 URL
- 另一种在javascript中创建随机动态url的方法/阻止wpengine缓存
- 从用户输入到搜索的动态 URL
- SAPUI5 和 OData 服务的动态 URL
- 使用动态 URL 初始化时保存主干模型
- 动态 url 作为 css 和 D3JS 中伪元素的数据属性
- 使用Javascript/Jquery来删除动态URL