Angular UI-Router 与定义的状态不匹配答案

【问题标题】：Angular UI-Router doesn't match a defined stateAngular UI-Router 与定义的状态不匹配
【发布时间】：2015-08-21 09:08:29
【问题描述】：

我正在使用UI-Router 模块进行路由。我有 2 个状态，路由器应该与它们匹配 url：

// Dashboard
.state('dashboard', {
    url: "/dashboard",
    templateUrl: "dashboard/views/index.html",
    controller: "DashboardController",
    ...
})

// Users
.state('users', {
    url: "/users",
    templateUrl: "users/views/index.html",
    controller: "UsersController",
    ...
})

// Single User
.state('users.id', {
    url: "/{id:^[a-z0-9_-]{3,16}$}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

我也设置了默认路由：

$urlRouterProvider.otherwise("/dashboard");

当我去http://127.0.0.1:8000/app/#/users时，我希望路由器匹配用户 state

当我去http://127.0.0.1:8000/app/#/users/testuser时匹配用户 state

问题：

用户状态运行良好，但用户状态 url 不匹配并重定向到默认状态。有什么问题？

【问题讨论】：

标签： javascript regex angularjs angular-ui-router

【解决方案1】：

有a working example

尝试使用这个 regex def:

  .state('users.id', { 
      url: "/{id:(?:[a-z0-9_-]{3,16})}",

这些链接可以使用

  <a href="#/users">
  <a href="#/users/testuser">

否则会这样

  <a href="#/users/xx">

一些灵感可能是found here

如果我们想直接进入“users.id”状态，我们只需要使用正确的调用。在this extended plunker 中，我们可以看到可以这样做：

// working
<a ui-sref="users">
<a ui-sref="users.id({id:'testword'})">
// not working - id does not fit - otherwise is used
<a ui-sref="users.id({id:'not-working simply too long'})">

$state.go('users.id', {id:'testword'})

也是如此

查看here

【讨论】：

谢谢，但是当我想不通过锚点直接进入 users.id 状态时它不起作用。
我更新了答案，添加了更多细节，扩展了 plunker。希望现在你应该得到你的答案；）祝 UI-Router 好运
感谢您的快速工作，但新问题是users.id 状态会加载users 状态templateUrl 视图。先生能帮忙吗？

【解决方案2】：

以下是我过去的做法示例。也许对你有帮助。

app.config(['$stateProvider', '$urlRouterProvider',
        function ($stateProvider, $urlRouterProvider,$rootScope,$cookieStore) {
            $urlRouterProvider.otherwise("/login");
            $stateProvider
              .state('login', {
                  url: '/login',
                  title: 'Login',
                  templateUrl:'views/loginView.html',
                  controller: 'loginCtrl',
                  resolve: resolver($rootScope),

              })
              .state('account', {
                  url: '/account',
                  title: 'My Account',
                  accessLevel: 2,
                  resolve: resolver($rootScope,$cookieStore),   
                  views: {
                    'navigation': {
                         templateUrl: 'views/navigationView.html',
                         controller: 'navigationCtrl'
                    },
                    'content': {
                        templateUrl: 'views/contentView.html',
                        controller: 'navigationCtrl'
                    }
                 }            
              })
              .state('account.dashboard', {
                 url:'/dashboard',
                 title: 'Dashboard',
                 views : {
                    'pageContent': {
                        templateUrl:'views/dashboardView.html',
                        controller: 'dashboardCtrl'
                    }   
                 }             
              })
              .state('account.foo', {
                 url:'/foo',
                 title: 'foo',
                 views : {
                    'pageContent': {
                        templateUrl:'views/foo.html',
                        controller: 'fooCtrl'
                    }   
                 }             
              })
              .state('account.maps', {
                 url:'/maps',
                 title: 'Maps and stuff',
                 views : {
                    'pageContent': {
                        templateUrl:'views/mapsView.html',
                        controller: 'mapsCtrl'
                    }   
                 }             
              })

      }])

【讨论】：