javascript - Angular 用户界面路由器状态问题

Question

我目前正在尝试在我的 Angular 应用程序中设置路由。我有这些状态:

.state('pet', {
  url: '/pet/:petId',
  templateUrl: 'scripts/views/profile/profile.html',
  controller: 'ProfileCtrl'
})
.state('addPet', {
  url: '/pet/add',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})
.state('editPet', {
  url: '/pet/:petId/edit',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})

问题是当我想继续“addPet”状态时，angular 试图调用“pet”状态并将“add”作为“:petId”参数。

所以我尝试用不同的方式来做:

.state('pet', {
  url: '/pet',
  abstract: true
})
.state('pet.show', {
  url: '/:petId',
  templateUrl: 'scripts/views/profile/profile.html',
  controller: 'ProfileCtrl'
})
.state('pet.add', {
  url: '/add',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})
.state('pet.edit', {
  url: '/:petId/edit',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})

它根本不起作用。

有什么建议吗？

Answer 1

改变顺序，保持addPet状态在pet状态

.state('addPet', {
  url: '/pet/add',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})
.state('pet', {
  url: '/pet/:petId',
  templateUrl: 'scripts/views/profile/profile.html',
  controller: 'ProfileCtrl'
})
.state('editPet', {
  url: '/pet/:petId/edit',
  templateUrl: 'scripts/views/profile/edit.html',
  controller: 'ProfileFormCtrl'
})