我要构建的内容:
具有两个导航栏的页面,一个用于颜色,一个用于字母。单击颜色按钮将更改一个 View 以表示该颜色。单击该字母将使不同的 View 代表该字母。第三个 View 应该同时了解颜色和字母。我还想在这些状态之一发生变化时触发警报。
我不想对颜色或字母进行硬编码。我想重复使用这些模板,所以我想对颜色使用一个模板,但根据某些颜色更改其中的内容。
路线看起来像这样: /房间/{颜色}/{字母}
我找不到将这些部分组合在一起的示例。我仍然只是模糊地理解/room/{color} 的正确方式,但我不知道如何添加/room/{color}/{letter}。另外,我对我应该是用户 href 还是 ui-sref 感到困惑。
这是我能得到的最接近的: http://plnkr.co/edit/U7ugVfXfwUwtg7x0aBkT?p=preview
最佳答案
这是一个有效的 plunker .调整后的状态定义:
.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);
}
}
}
})
上面的代码就像下面的部分一样使用绝对 View 命名,如 'color@meeting'
针对 session 状态 View ...
.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);
}
},
}})
;
调整后的 View 定义,显示如何传递参数
<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>
关于javascript - angular ui-router 多个嵌套和 Controller 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24112571/