Question

使用AngularJS + ui-router，我需要将一个url与单词列表匹配：

然而，使用正则表达式我尝试使用一个或两个单词并且它起作用

 url: '/{source:(?:John|Paul)}/:id'

但我需要将我的网址与单词列表相匹配。

例如： var sourceList = ['John'，'Paul'，'George'，'Ringo']; url：'/ {source :( ?: sourceList）} /：id'

有没有办法比较我的网址和匹配的数组列表？

Answer 1

不完全确定您要搜索的是什么...因为它可能是动态网址匹配器或只是智能正则表达式。这是一个plunker with working example。它实际上1）仅从传递的名称列表构建正则表达式... 2）显示行动中的urlMatcher

这里的答案是：使用UrlMatcher。

$urlMatcherFactory and UrlMatchers

定义url模式和参数占位符的语法。 $ urlRouterProvider在幕后使用此工厂服务来缓存已编译的UrlMatcher对象，而不必在每个位置更改时重新解析url模式。大多数用户不需要直接使用$ urlMatcherFactory，但是创建UrlMatcher对象并将其作为url传递给状态配置可能很有用。

示例：

var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1");
$stateProvider.state('myState', {
    url: urlMatcher 
});

plunker中的例子：

  var sourceList= ['John', 'Paul', 'George', 'Ringo']
  var names = sourceList.join('|');
  var urlMatcher = $urlMatcherFactory.compile("/{source:(?:" + names + ")}/:id");

  $stateProviderRef 
    .state('names', { 
      url: urlMatcher,
      templateUrl: 'tpl.root.html',
      controller: 'MyCtrl'
    });

example显示出更复杂的解决方案。如果我们在cofnig阶段确实有名单列表......简单连接应该有效。但如果稍后（.run()）可以通过$http提供...此解决方案可以提供帮助

Answer 2

之前的答案还可以，但我大部分时间都需要这样简单的解决方案：

 url: '/something/{source:(?:' + ['John', 'Paul'].join('|') + ')}/:id',

无需使用$ urlMatcherFactory

将URL与AngularJS ui-router中的数组列表匹配

2 个答案:

$urlMatcherFactory and UrlMatchers