Angularjs ui.router默认参数值导致页面刷新错误

我正在试验ui.router，使一些导航选项卡保持在状态。当我意识到当我刷新页面时，指定一个默认参数值会导致一些意外的/错误的/奇怪的行为时，我几乎可以得到我想要的一切

我有两个参数，

stateNum

（1或2）和

subState

（A、B或C）。URL的格式为

/statetab/state/：stateNum/sub/：subState

。有关的州定义如下：

$stateProvider.state("stateTabs", {
     url:        "/stateTabs"
    ,controller: "StateTabsCtrl"

//  ,params: { // default params
//       stateNum: "2"
//      ,subState: "B"
//  }

    ,templateUrl: "tplStateTabs"
});
$stateProvider.state("stateTabs.state", {
    url: "/state/:stateNum"
});
$stateProvider.state("stateTabs.state.sub", {
    url: "/sub/:subState"
});

如果启用了

params

属性，刷新页面将导致

stateNum

等于URL中的

/sub/

，而

subState

等于默认值

“x”

。它似乎在做贪婪的匹配。单击任何选项卡将返回正常功能

我希望在刷新时，ui.router会看到一个URL，比如“statetab/state/2/sub/B”，并将其解析为正确的$stateParams。这是一个错误还是我做错了什么

我最终想要实现的是能够

ui sref

只

statetab

，并将该默认值设置为预定义的stateNum+子状态

下面是完整的代码片段，但需要将其复制到本地文件才能刷新并触发错误

var statetab=（函数（）
{
“严格使用”；
var module=angular.module（“statetab”、“ng”、“ui.router”）；
module.config（[“$stateProvider”，“$urlRouterProvider”，
函数（$stateProvider，$urlRouterProvider）
{
$urlRouterProvider。否则（“/”）；
//如果未定义模板，则未实例化控制器
$stateProvider.state（“索引”{
网址：“/”
});
$stateProvider.state（“statetab”{
url:“/statetab”
，控制器：“StateTabsCtrl”
/*
*如果启用了以下属性，
*刷新页面将导致stateNum
*等于“//sub/”
*从URL和subState中删除，以等于
*默认为“x”。单击任何选项卡都将返回
*恢复正常功能。
*/
//，参数：{//默认参数
//stateNum：“3”
//，子状态：“x”
//        }
，templateUrl:“tplstatetab”
});
$stateProvider.state（“statetab.state”{
url:“/state/：stateNum”
});
$stateProvider.state（“statetab.state.sub”{
url:“/sub/：subState”
});
}
]);
module.controller（“StateTabsCtrl”[“$scope”，
职能（$范围）
{
$scope.$on（“$stateChangeSuccess”），函数（事件、toState、toParams、fromState、fromParams）{
$scope.stateParams=toParams；
});
}
]);
返回模块；
})();
div#statetab ul.tabbed-nav，
div#statetab ul.tabbed-sub-nav{
显示器：flex；
柔性包装：nowrap；
对齐项目：拉伸；
填充：0；
保证金：0；
字体大小：16px；
文本对齐：居中；
线高：1.1；
}
美国国家航空航天局，
分区状态选项卡ul.tabbed-sub-nav li{
填充：1rem2rem；
右边距：1px；
显示器：flex；
柔性流动：柱；
证明内容：中心；
}
div#StateTab ul.tabbed-nav li:最后一个孩子，
div#statetab ul.tabbed-sub-nav-li:最后一个孩子{
右边距：0；
}
国家选项卡ul.tabbed-nav li a分区，
分区状态选项卡ul.tabbed-sub-nav li a{
颜色：继承；
文字装饰：无；
}
分区#状态选项卡ul.tabbed-nav{
颜色：白色；
填充：0；
保证金：0；
}
分区状态选项卡ul.tabbed-nav li{
背景色：黑色；
}
div#statetab ul.tabbed-sub-nav{
调整内容：灵活启动；
颜色：继承；
位置：相对位置；
}
分区状态选项卡ul.tabbed-sub-nav li{
背景颜色：银色；
z指数：10；
}
分区#状态选项卡ul.tabbed-nav li.selected{
颜色：黑色；
背景色：#4dff4d！重要；
}
div#statetab ul.tabbed-sub-nav li.selected{
背景色：#269abc！重要；
}

AngularJS沙箱
AngularJS沙箱

状态1
状态2


子状态A
子状态B
子状态C

$stateParams:{{stateParams}}

stateNum:{{stateParams.stateNum}}

子状态：{{stateParams.subState}}

这里的解决方案并不复杂-只需将
参数设置为属于定义它们的状态即可。有一个

检查它的运行情况

  $stateProvider.state("stateTabs", {
     url:        "/stateTabs"
    ,controller: "StateTabsCtrl"
    ,templateUrl: "tplStateTabs.html"

   // PARAMS do not belong here, because there is nothing related in URL

  });

  $stateProvider.state("stateTabs.state", {
    url: "/state/:stateNum",
    params: { // default params
       stateNum: "3"               // here belongs stateNum
    }
  });
  $stateProvider.state("stateTabs.state.sub", {
    url: "/sub/:subState",
    params: { // default params
      subState: "x"                // here can be subState
    }
  });