Javascript ui路由器动态创建嵌套状态

我正在为我的网页创建一个垂直导航面板（一个非常基本的任务）。考虑到不同的用户角色应该对服务器上的授权模块具有不同的nav项，因此希望通过从服务器获取数据来动态而不是静态地创建导航内容

我试图使用UI路由器动态创建嵌套状态（这是一个很自然的想法，称为“分而治之”），但遇到了一个问题（我在中描述了它，但只有代码片段，无法演示）。我在这里以一种更一般的方式为这个问题构建了一个简单的演示

演示
让app=angular.module（'demo'，['ui.router']）；
app.provider（'runtimeStates'，['$stateProvider'，函数（$stateProvider）{
此。$get=函数（）{
返回{
newState:函数（名称、参数）{
$stateProvider.state（名称，参数）；
返回名称；
}
};
};
}]);
app.config（['$urlRouterProvider'，'$stateProvider'，函数（up，sp）{
sp.state（“state1”，state1）；
向上。否则（'/state1'）；
}]);
设state1={
url:“/state1”，
控制器：['runtimeStates'，'$state'，函数（$rs，$st）{
this.stateName=$st.current.name；
this.createSubState=函数（）{
$st.go（$rs.newState（$st.current.name+'.state2'，state2）{
消息：“消息从“+$st.current.name+”发送到状态2”
});
}
}],
controllerAs:“$ctrl”，
模板：`
{{$ctrl.stateName}}开始

{{$ctrl.stateName}}end

`
};
设state2={
参数：{消息：'}，
控制器：['runtimeStates'，'$transition$'，'$state'，函数（$rs，$tr，$st）{
this.parentMessage=$tr.params（）.message；
this.stateName=$st.current.name；
this.createSubState=函数（）{
$st.go（$rs.newState（$st.current.name+'.state3'，state3）{
消息：“消息从“+$st.current.name+”发送到状态3”
});
};
}],
controllerAs:“$ctrl”，
模板：`
{{$ctrl.stateName}}开始

{{$ctrl.parentMessage}
{{$ctrl.stateName}}end

`
};
让state3={
参数：{消息：'}，
控制器：['runtimeStates'，'$transition$'，'$state'，函数（$rs，$tr，$st）{
this.parentMessage=$tr.params（）.message；
this.stateName=$st.current.name；
}],
controllerAs:“$ctrl”，
模板：`
{{$ctrl.stateName}}开始

{{$ctrl.parentMessage}
{{$ctrl.stateName}}end

`
};

由于ng的点击，它搞砸了。第一次点击有效，第二次点击触发内部点击，然后触发外部点击。这就是为什么。状态2总是附加在后面

编辑

尝试将$event.stopPropagation（）添加到ng单击：

<div ng-click="$event.stopPropagation(); $ctrl.createSubState()">

编辑3-解决方案

我提到state2控制器在状态更改为state3后被调用的原因是参数

消息

。默认情况下，对状态参数的每次更改都会导致状态解析。如果不希望这样，请将参数指定为动态，如：

params: {
  message: {
    value: '',
    dynamic: true
  }
}

---

我尝试添加

$event.stopPropagation（）

到两个ng click，但结果没有变化。根据您的想法，

ng click

意外触发，我将其移动到标记中，因此

ui视图

超出了

ng click

的影响范围。然后，state3的内容成为预期内容（

state1.state2.state3 begin\n从state1.state2到state3的消息\nstate1.state2.state3 end

）；但是state2视图的内容也变为上面state3视图的内容！所以我认为这确实与UI路由器有关。我投票支持你，但问题仍未解决。我看不到建议的修复方法。如果你是指建议添加

$event.stopPropagation（）

到

ng单击

，然后我尝试了它，但没有帮助，所以我取消了它。另外，我通过将

ng click

放置到

元素，将

ui视图

移出了

ng click

影响区域；因此，单击状态2不应立即触发状态1的

ng单击这就是为什么我在你的回答中得到了与你的EDIT2相同的结果；这仍然不是所希望的，因为state3输出重写了state2的视图。我部分地理解了为什么state2的值被重写。当您单击state2进入state3时，state2的控制器在状态更改后被调用，因此this.stateName的值被设置为当前值$st.current.name，即state1.state2.state3。我试图找出控制器再次被调用的原因。请阅读我的编辑3。这不是bug。路由器的行为与预期一致。我不得不伪造你的赃物，因为缺少权限。
params: {
  message: {
    value: '',
    dynamic: true
  }
}