UI路由器多視圖單個控制器
[英]UI-Router Multiple Views Single Controller
問題描述
一個單例控制器是否可能有多個視圖[ https://github.com/angular-ui/ui-router/issues/494] ？
用例：我有一個ui-view = header和ui-view = content。 我根據當前狀態更改標題以顯示上下文相關的按鈕（即返回，保存，過濾器等）。我希望這些按鈕在內容控制器中調用函數，但是如果執行以下操作，它將創建兩個MyController對象。 如果有任何初始化函數，它們將被調用兩次，這在大多數情況下是對我的服務器的查詢的兩倍。
views:{
'header':{
templateURL:'...',
controller:'MyController'
},
'content':{
templateURL:'...',
controller:'MyController'
}
}
更新：基於@pankajparkar
我當前的index.html看起來像這樣（為便於理解而簡化）
<nav ui-view="header"></nav>
<div ui-view="content"></div>
但是您的建議將包含/需要子視圖
<!--index.html-->
<body ui-view></body>
<!--format.html-->
<nav ui-view="header"></nav>
<div ui-view="content"></div>
使用以下控制器
state('app', {
url: '/app',
controller: 'MyController',
templateURL: 'format.html', //Targets ui-view in index.html
views:{
'header':{
templateURL:'...', //Targets ui-view="header" in format.html
},
'content':{
templateURL:'...', //Targets ui-view="header" in content.html
}
}
});
3 個解決方案
解決方案1
2 已采納 2015-04-17 19:55:13
基本上，您需要在單身人士的某種提供程序（通常是服務或工廠）中處理此類事務，然后可以將單身人士注入到控制器中，並且控制器的每個實例都將使用共享/相同的提供程序。
如果您需要幫助來實現此功能，請共享您的控制器。
盡管我確實同意此處發布的其他答案中的建議，但是您可能仍要考慮將功能放在提供程序中。 在大多數情況下，最好將大多數功能和數據存儲在提供程序中，並且讓您的控制器僅負責傳遞用戶交互以觸發提供程序中的適當調用（這將解決您當前的問題，因為它們單身人士）。
解決方案2
1 2017-01-06 13:42:05
我以這種方式工作：
$stateProvider.state("abc",{
url:'/abc',
views:{
'':{
templateUrl: 'abc.html',
controller:'MyController' <-- it's also attached to subviews
},
'header@abc':{
templateURL:'...'
},
'content@abc':{
templateURL:'...'
}
}
})
解決方案3
0 2015-04-17 20:01:22
您應該將該控制器置於“外部views選項中，以使其僅在頁面上加載一次
$stateProvider.state("abc",{
url:'/abc',
templateUrl: 'abc.html',
controller:'MyController', //<---place it here will load it once
views:{
'header':{
templateURL:'...'
},
'content':{
templateURL:'...'
}
}
})
使用ui-router在單個狀態下共享一個控制器的多個視圖
[英]multiple views in a single state sharing a single controller using ui-router
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.