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

I am trying to creating web page to perform on edit actions in both in parent(first.edit) and child(second.edit) states. I sending related state parameters through URL, those are captured by using regex patterns.

我正在尝试创建web页面，以在父类(first.edit)和child(second.edit)状态中执行编辑操作。我通过URL发送相关的状态参数，这些参数是通过使用regex模式捕获的。

When I click on ui-sref="home.first.edit({firstId:10})" link the controller receiving state parameter firstId correctly i.e 10.

当我点击ui-sref=“home.first.edit({firstId:10})”时，正确地链接接收状态参数firstId的控制器。e 10。

When I click on ui-sref="home.first.second.edit({firstId:10,secondId:20})" link or refresh the the state the controller receiving in correct value for firstId i.e 10/second/20. and it is moving to parent state(home.first)

当我点击ui-sref="home.first.second.edit({firstId:10,secondId:20})"链接或刷新控制器接收到的firstId I值为正确的状态。e 10 /秒/ 20。它正在向父状态移动(home.first)

This is my js file

这是我的js文件

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

   $urlRouterProvider.otherwise('/home');

Here are the states:

这里是美国:

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

Here is the rest of the code with controller definition

下面是带有控制器定义的其余代码

  .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);
    }
  );

1 个解决方案

#1

There is a working plunker

有一个工作的活塞。

Your state definition could be simplified like this:

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

.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",

But the way you are expecting it to work should be like this:

但是你期望它起作用的方式应该是这样的:

.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",

These links will start to work then:

这些联系届时将开始发挥作用:

<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})">

Check it in action here

在这里检查一下

#1