angularjs - 单击刷新时，状态参数值与 angularjs 中 UI-Router 中的 url 混合

Question

我正在尝试创建网页以在父(first.edit)和子(second.edit)状态下执行编辑操作。 我通过 URL 发送相关的状态参数，这些参数是使用正则表达式模式捕获的。

当我点击 ui-sref="home.first.edit({firstId:10})"链接时， Controller 正确接收状态参数 firstId，即 10。

当我点击 ui-sref="home.first.second.edit({firstId:10,secondId:20})"链接或刷新 Controller 接收正确值的状态时对于firstId，即10/second/20。 并且它正在移动到父状态(home.first)

这是我的js文件

angular.module('MyApp', [
  'ui.router'
])
  .config(function($stateProvider, $urlRouterProvider) {

   $urlRouterProvider.otherwise('/home');

以下是状态:

$stateProvider.state('home', {
  url: '',
  views: {
    'home_view': {
      templateUrl: 'index.html',
      controller: 'homeController'
    }
  }
})
.state('home.first', {
  url: "/first",
   params:{
    firstId:null
    },
  views: {
    'home_view': {
      templateUrl: "first.html",
      controller: 'firstCtrl'
    }
  }
})
.state('home.first.edit', {
      url: "/{firstId:[0-9]+}/edit",
      views: {
        'first_view': {
          templateUrl: "/edit_first.html",
          controller: 'firstCtrl'
        }
      }
    })
.state('home.first.second', {
    url: "/second",
    params:{
    secondId:null
    }
    views: {
      'first_view': {
        templateUrl: "/second.html",
        controller: 'secondCtrl'
      }

    }
  })
.state('home.first.second.edit', {
    url: "/{secondId:[0-9]+}/edit",
    views: {
      'second_view': {
        templateUrl: "/views/testplan/projects/edit_second.html",
        controller: 'secondCtrl'
      }
    }
  })

这是带有 Controller 定义的其余代码

  .controller(
    'homeController',
    function($scope, $state, $stateParams) {
      //  console.log($stateParams.firstId);
    }
  )
  .controller(
    'firstCtrl',
    function($scope, $state, $stateParams) {
      console.log($stateParams.firstId);
    }
  )
  .controller(
    'secondCtrl',
    function($scope, $state, $stateParams) {
      console.log($stateParams.secondId);
    }
  );

Answer 1

有a working plunker

您的状态定义可以像这样简化:

.state('home.first', {
    url: "/first",
    ...
.state('home.first.edit', {
    url: "/{firstId:[0-9]+}/edit",
    ...
.state('home.first.second', {
    url: "/second",
    ...
.state('home.first.second.edit', {
    url: "/{secondId:[0-9]+}/edit",

但是您期望它的工作方式应该是这样的:

.state('home.first', {
    url: "/first/{firstId:[0-9]+}",
    ...
.state('home.first.edit', {
    url: "/edit",
    ..
.state('home.first.second', {
    url: "/second/{secondId:[0-9]+}",
    ...
.state('home.first.second.edit', {
    url: "/edit",

这些链接将开始工作:

<a ui-sref="home.first({firstId:1})">
<a ui-sref="home.first({firstId:22})">
<a ui-sref="home.first.edit({firstId:333})">
<a ui-sref="home.first.edit({firstId:44444})">

<a ui-sref="home.first.second({firstId:4444})">
<a ui-sref="home.first.second.edit({firstId:1,secondId:333})">
<a ui-sref="home.first.second.edit({firstId:22,secondId:55555})">

查看action here