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

Question

我正在使用UI-Router模块进行路由。 我有2种状态，表示路由器应将网址与它们匹配：

// 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

问题：

用户状态效果很好，但是用户状态网址未匹配，而是重定向到默认状态。 有什么问题？

Answer 1

有一个可行的例子

尝试使用此正则表达式 def：

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

这些链接将起作用

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

否则

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

一些启发可以在这里找到

如果要直接进入状态“ users.id”，我们只需要使用适当的调用即可。 在这个扩展的插件中 ，我们可以看到可以这样做：

// 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'})

在这里检查

Answer 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'
                    }   
                 }             
              })

      }])