[英]angular ui-router multiple nested and controller data
我正在努力建立的:
帶有兩個導航欄的頁面,一個用於顏色,一個用於字母。 單擊顏色按鈕將更改一個視圖以表示該顏色。 單擊該字母將使不同的視圖代表該字母。 第三種觀點應該知道顏色和字母。 我還想在其中一個狀態發生變化時觸發警報。
我不希望顏色或字母硬編碼。 我想重用這些模板,所以我想為顏色使用單個模板,但根據某些顏色更改其中的內容。
路線看起來像這樣:/ room / {color} / {letter}
我找不到任何將這些部分組合在一起的例子。 我仍然只是模糊地理解hand / 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);
}
}
}
})
上面的代碼是因為下面的部分使用絕對視圖命名,如'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);
}
},
}})
;
調整后的視圖定義,顯示如何傳遞參數
<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.