角度 UI 路由器与定义的状态不匹配

Question

我使用UI-Router模块进行路由。我有两个状态，路由器应该与它们匹配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");

我想要路由器匹配用户 state当我去http://127.0.0.1:8000/app/#/users

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

问题:

用户状态工作良好，但用户状态url没有匹配，重定向到默认状态。有什么问题吗?

Answer 1

有一个工作示例

尝试使用正则表达式 def:

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

这些链接将工作

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

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

可以在这里找到一些灵感

在这种情况下，我们想去状态用户。不直接，我们只需要使用适当的呼叫。在这个扩展的柱塞中，我们可以看到它可以这样做:

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