ui-router动态创建嵌套状态 [英] ui-router creating nested states dynamically
问题描述
我正在为我的网页创建一个垂直导航面板(一项非常基本的任务).考虑到针对服务器上的授权模块，不同的用户角色应具有不同的导航项，因此希望通过从服务器获取数据来动态而非静态地创建导航内容.
I am creating a vertical navigation panel for my web page (a very basic task). Considering different user roles should have different nav-items against the authorization module on the server, it is desired to create the navigation contents dynamically rather than statically, by getting the data from the server.
我正在尝试使用UI路由器动态创建嵌套状态(这实际上是一个自然的想法，称为分而治之")，但是遇到了问题(我在
I'm trying to use the UI Router to create nested states dynamically (which is really a natural idea called "divide-and-conquer") but got a problem (I described it in another thread but there are only code snippets and cannot demo). I constructed a simple demo here for the problem, in a more general way.
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script>
let app = angular.module('demo', ['ui.router']);
app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
this.$get = function () {
return {
newState: function (name, param) {
$stateProvider.state(name, param);
return name;
}
};
};
}]);
app.config(['$urlRouterProvider', '$stateProvider', function (up, sp) {
sp.state('state1', state1);
up.otherwise('/state1');
}]);
let state1 = {
url: '/state1',
controller: ['runtimeStates', '$state', function ($rs, $st) {
this.stateName = $st.current.name;
this.createSubState = function(){
$st.go($rs.newState($st.current.name + '.state2', state2), {
message: 'message from ' + $st.current.name + ' to state2'
});
}
}],
controllerAs: '$ctrl',
template: `<div ng-click="$ctrl.createSubState()" style="border-style: solid; cursor: pointer;">
<p>{{$ctrl.stateName}} begin</p>
<ui-view></ui-view>
<p>{{$ctrl.stateName}} end</p>
</div>`
};
let state2 = {
params: {message : ''},
controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
this.parentMessage = $tr.params().message;
this.stateName = $st.current.name;
this.createSubState = function(){
$st.go($rs.newState($st.current.name + '.state3', state3),{
message: 'message from ' + $st.current.name + ' to state3'
});
};
}],
controllerAs: '$ctrl',
template: `<div ng-click="$ctrl.createSubState()" style="border-style: solid; cursor: pointer;">
<p>{{$ctrl.stateName}} begin</p>
{{$ctrl.parentMessage}}
<ui-view></ui-view>
<p>{{$ctrl.stateName}} end</p>
</div>`
};
let state3 = {
params: {message : ''},
controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
this.parentMessage = $tr.params().message;
this.stateName = $st.current.name;
}],
controllerAs: '$ctrl',
template: `<div style="border-style: solid;">
<p>{{$ctrl.stateName}} begin</p>
{{$ctrl.parentMessage}}
<p>{{$ctrl.stateName}} end</p>
</div>`
};
</script>
</head>
<body>
<ui-view></ui-view>
</body>
</html>
当填充状态1的视图时，我可以单击它并生成包含预期内容的状态2的视图；但是当继续单击state2的视图时，生成的内容将完全混乱.预期:
When the view of state1 populated, I can click on it and generates the view of state2 with the contents expected; but when continuing to click on the view of state2, the generated contents are totally messed. Expected:
state1 begin
state1.state2 begin
message from state1 to state2
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2 end
state1 end
生成:
state1 begin
state1.state2.state3.state2 begin
message from state1.state2.state3 to state2
state1.state2.state3.state2 begin
message from state1.state2.state3 to state2
state1.state2.state3.state2 end
state1.state2.state3.state2 end
state1 end
我无法解释原因，也不知道如何解决.
I cannot explain why and don't know how to fix.
编辑
按照@scipper的想法(第一个答案)，我将演示更新为以下内容:
Following the idea of @scipper (the first answer) I updated the demo to bellow:
<!DOCTYPE html>
<html ng-app="demo28">
<head>
<meta charset="utf-8" />
<title>Demo28</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script>
let app = angular.module('demo28', ['ui.router']);
app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
this.$get = function () {
return {
newState: function (name, param) {
$stateProvider.state(name, param);
return name;
}
};
};
}]);
app.config(['$urlRouterProvider', '$stateProvider', function (up, sp) {
sp.state('state1', state1);
up.otherwise('/state1');
}]);
let state1 = {
url: '/state1',
controller: ['runtimeStates', '$state', function ($rs, $st) {
this.stateName = $st.current.name;
this.createSubState = function(){
$st.go($rs.newState($st.current.name + '.state2', state2), {
message: 'message from ' + $st.current.name + ' to state2'
});
}
}],
controllerAs: '$ctrl',
template: `<div style="border-style: solid;">
<p ng-click="$ctrl.createSubState()" style="cursor: pointer; color: blue;">{{$ctrl.stateName}} begin</p>
<ui-view></ui-view>
<p>{{$ctrl.stateName}} end</p>
</div>`
};
let state2 = {
params: {message : ''},
controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
this.parentMessage = $tr.params().message;
this.stateName = $st.current.name;
this.createSubState = function(){
$st.go($rs.newState($st.current.name + '.state3', state3),{
message: 'message from ' + $st.current.name + ' to state3'
});
};
}],
controllerAs: '$ctrl',
template: `<div style="border-style: solid;">
<p ng-click="$ctrl.createSubState()" style="cursor: pointer; color: blue;">{{$ctrl.stateName}} begin</p>
{{$ctrl.parentMessage}}
<ui-view></ui-view>
<p>{{$ctrl.stateName}} end</p>
</div>`
};
let state3 = {
params: {message : ''},
controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
this.parentMessage = $tr.params().message;
this.stateName = $st.current.name;
}],
controllerAs: '$ctrl',
template: `<div style="border-style: solid;">
<p>{{$ctrl.stateName}} begin</p>
{{$ctrl.parentMessage}}
<p>{{$ctrl.stateName}} end</p>
</div>`
};
</script>
</head>
<body>
<ui-view></ui-view>
</body>
</html>
，内容变为:
state1 begin
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2.state3 end
state1 end
它表明stat2的视图受state3影响，这应该是使用UI Router的问题. -问题仍未解决.
It shows that the view of stat2 is effected by state3, which should be a problem of using UI Router. -- The problem is still unsolved.
推荐答案
由于ng-click的问题，它搞砸了.第一次单击有效，第二次单击触发内部ng-click，然后触发外部ng-click.这就是为什么总是附加.state2的原因.
It messes up, because of the ng-click's. The first click works, the second click triggers the inner ng-click, then the outer one. That's why .state2 als always appended.
编辑
尝试将$ event.stopPropagation()添加到ng-click的按钮中:
Try adding $event.stopPropagation() to the ng-click's:
<div ng-click="$event.stopPropagation(); $ctrl.createSubState()">
编辑2
第二个建议:您只有未命名的视图.通过我的修复，我发现这两个内部视图似乎是相同的.第二次点击后，我的输出是:
Second suggestion: You only have unnamed views. With my fix I found out, that the two inner views seem to be the same. My output after the second click is:
state1 begin
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2.state3 end
state1 end
编辑3-解决方案
我提到在状态更改为state3后调用state2控制器的原因是参数message.对状态参数的每次更改都会导致状态在默认情况下解析.如果您不想这样做，则将参数指定为动态参数，例如:
The reason I mentioned that state2 controller gets invoked after the state change to state3 is the parameter message. Every change to a state parameter, causes the state to resolve by default. If you do not want that, specify the parameter as dynamic like:
params: {
message: {
value: '',
dynamic: true
}
}
这篇关于ui-router动态创建嵌套状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
