gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:16:32 24 4
gpt4 key购买 nike

目前我有一个状态 url 定义为:
…/:table/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'
});
});

问 - 据我所知,我在 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-parameters

关于javascript - 限制与 AngularJS 状态匹配的动态 URL 参数的最佳方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28842417/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com