如何在 angular ui-路由器状态中添加 guid 正则表达式

Question

我有这条路线

.state('mystate', {
    url: '/{id}',
    templateUrl: '/views/partial.html'
});

id 参数应该是一个类似“2a542f61-5fff-4607-845d-972e6c3ad1e4”形式的 guid。我如何在 url "url: '/{id:?what should i put here}'" 中添加它。

Answer 1

您可以定义自己的参数类型。

var GUID_REGEXP = /^[a-f\d]{8}-([a-f\d]{4}-){3}[a-f\d]{12}$/i;
$urlMatcherFactoryProvider.type('guid', {
  encode: angular.identity,
  decode: angular.identity,
  is: function(item) {
     return GUID_REGEXP.test(item);
  }
});

这是一个showcase plunker 的解决方案

然后在url路由表达式中指定这个类型：

.state('mystate', {
  url: '/{id?guid}',
  templateUrl: '/views/partial.html'
});

您可以在文档

中阅读有关 that page 的更多信息

Answer 2

有a working plunker

我们可以在 url 定义中提供正则表达式：

url: "/{id:(?:[a-fA-F0-9]{8}(?:-[a-fA-F0-9]{4}){3}-[a-fA-F0-9]{12})}",

详细了解我们的 url 定义选项：

http://angular-ui.github.io/ui-router/site/#/api/ui.router.util.type:UrlMatcher

小片段：

'{' name ':' regexp|type '}' - curly placeholder with regexp or type name. Should the regexp itself contain curly braces, they must be in matched pairs or escaped with a backslash.

Answer 3

经过反复试验，我想出了：

$urlMatcherFactoryProvider.type('guid', {
    encode: angular.identity,
    decode: angular.identity,
    equals: function(a, b) { return a.toUpperCase() === b.toUpperCase(); },
    is: function(val) {
        // Local to avoid any lastIndex issues
        var GUID_REGEXP = /^[a-f\d]{8}-(?:[a-f\d]{4}-){3}[a-f\d]{12}$/i;
        return GUID_REGEXP.test(val);
    },
    // No anchors or flags with pattern
    pattern: /[a-fA-F\d]{8}-(?:[a-fA-F\d]{4}-){3}[a-fA-F\d]{12}/
});

这是基于@just-boris 的回答。一个关键区别是 pattern。如果没有这个，无效的 GUID 似乎不会触发 $urlRouterProvider.otherwise().

如何在 angular ui-路由器状态中添加 guid 正则表达式

How to add guid regex in angular ui-router state

javascript

angularjs

angular-ui

angular-ui-router