[英]angular ui-router multiple nested and controller data
What I'm trying to build: 我正在努力建立的:
A page with two nav bars, one for color, one for letter. 带有两个导航栏的页面,一个用于颜色,一个用于字母。 Clicking the color button will change one view to represent that color.
单击颜色按钮将更改一个视图以表示该颜色。 Clicking the letter will make a different view represent that letter.
单击该字母将使不同的视图代表该字母。 A third view should have knowledge of both the color and letter.
第三种观点应该知道颜色和字母。 I also want to trigger an alert any time one of these states changes.
我还想在其中一个状态发生变化时触发警报。
I don't want the colors or letters hardcoded. 我不希望颜色或字母硬编码。 I want to reuse these templates, so I want to use a single template for the colors but change out what's in it based on certain colors.
我想重用这些模板,所以我想为颜色使用单个模板,但根据某些颜色更改其中的内容。
The route would look like this: /room/{color}/{letter} 路线看起来像这样:/ room / {color} / {letter}
I'm having trouble finding any example that puts these pieces together. 我找不到任何将这些部分组合在一起的例子。 I still only vaguely understand the proper way to hand /room/{color}, but I have no idea to how to add /room/{color}/{letter}.
我仍然只是模糊地理解hand / room / {color}的正确方法,但我不知道如何添加/ room / {color} / {letter}。 Also, I'm confused on whether I should be user href or ui-sref.
另外,我对是否应该是用户href或ui-sref感到困惑。
Here's the closest I've been able to get: http://plnkr.co/edit/U7ugVfXfwUwtg7x0aBkT?p=preview 这是我能得到的最接近的: http : //plnkr.co/edit/U7ugVfXfwUwtg7x0aBkT?p =preview
Here is a working plunker . 这是一个工作的plunker 。 The adjusted state definition:
调整后的州定义:
.state('meeting', {
url: "/meeting",
templateUrl: "maintemp.html"
})
.state('meeting.color', {
abstract: true,
url: "/:color",
controller: function($scope, $stateParams) {
$scope.color = $stateParams.color;
//alert($scope.color);
},
views: {
'color': {
template: 'This is the color: {{color}}',
controller: function($scope, $stateParams) {
$scope.color = $stateParams.color;
//alert($scope.color);
}
},
'': {
template: 'This is the letter: {{letter}}',
controller: function($scope, $stateParams) {
$scope.letter = $stateParams.letter;
//alert($scope.letter);
}
}
}
})
The above code is as it was the below part is using absolute view naming like 'color@meeting'
targeting the meeting state views... 上面的代码是因为下面的部分使用绝对视图命名,如
'color@meeting'
目标是会议状态视图...
.state('meeting.color.letter', {
url: "/:letter",
views: {
'color@meeting': {
template: 'This is the color: {{color}}',
controller: function($scope, $stateParams) {
$scope.color = $stateParams.color;
//alert($scope.color);
}
},
'@meeting': {
template: 'This is the letter: {{letter}}',
controller: function($scope, $stateParams) {
$scope.letter = $stateParams.letter;
//alert($scope.letter);
}
},
}})
;
The adjusted view definition, showing how to pass params 调整后的视图定义,显示如何传递参数
<ul>
<li> <a ui-sref="meeting.color.letter({color:'blue', letter:'A'})">Blue</a></li>
<li> <a href="#/meeting/blue/a">OR BLUE</a></li>
<li> <a ui-sref="meeting.color.letter({color:'green', letter:'A'})">Green</a></li>
<li> <a href="#/meeting/green/b">OR GREEN</a></li>
</ul>
<div ui-view='color'></div>
<li> <a ui-sref="meeting.color.letter({color:'blue', letter:'A'})">blue A</a></li>
<li> <a ui-sref="meeting.color.letter({color:'red', letter:'B'})">red B</a></li>
<div ui-view></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.