[英]angular-ui-router shares state between multiple tabs in browser
[英]Multiple Angular-ui-router-tabs
我遇到了多個視圖,每個視圖都包含引導程序選項卡的問題。
在我的工作中,我有兩個ui視圖,它們都包含BS選項卡。
我的第一個問題是,假設我們將加載主頁,如何在每個ui視圖上顯示兩個BS選項卡的默認選項卡?
對於單個默認值,通過調用特定狀態很容易,但是這一點有所不同。
我將deepStateRedirect用於單個默認選項卡以進入狀態,但我確實需要兩個BS選項卡都顯示其默認選項卡。
我的下一個問題是,由於有兩個ui視圖,如果更改了另一個ui視圖,如何不影響另一個ui視圖的顯示?
代碼:
home.html
..some codes here..
<div class="col-sm-9 npm tab-div">
<div class="tab-container npm">
<tabs data="tabDataContent" type="tabs"></tabs>
<div class="tab-content npm">
<div ui-view="contentView" class="viewDiv"></div>
</div>
</div>
</div>
<div class="col-sm-3 npm report-div">
<div class="tab-container npm">
<tabs data="tabDataReport" type="tabs"></tabs>
<div class="tab-content npm">
<div ui-view="reportView" class="viewDiv"></div>
</div>
</div>
</div>
..some codes here..
家庭控制器
..some codes here..
$scope.tabDataContent = [
{
heading: 'REPORT MAP',
route: 'home.ReportMapTab'
},
{
heading: 'UNITS',
route: 'home.UnitsTab'
}
];
$scope.tabDataReport = [
{
heading: 'INCOMING',
route: 'home.ReportIncomingTab'
},
{
heading: 'ONGOING',
route: 'home.ReportOngoingTab'
}
];
..some codes here..
routers.js
..some codes here..
.state('home',{
url:'/home',
templateUrl: 'views/home.html',
controller: 'HomeController',
deepStateRedirect: { default: { state: 'home.init' } }
})
.state('home.init',{
url:'',
views: {
"contentView": {
templateUrl: 'views/homeTabs/reportMap.html',
controller: 'HomeReportMapController'
},
"reportView": { templateUrl: 'views/homeTabs/reportIncoming.html' }
}
})
.state('home.ReportMapTab',{
url:'/reportMap',
views: {
"contentView": {
templateUrl: 'views/homeTabs/reportMap.html',
controller: 'HomeReportMapController'
}
}
})
.state('home.UnitsTab',{
url:'/units',
views: {
"contentView": {
templateUrl: 'views/homeTabs/units.html',
controller: 'HomeUnitsController'
}
}
})
.state('home.ReportIncomingTab',{
url:'',
views: {
"reportView": {
templateUrl: 'views/homeTabs/reportIncoming.html',
}
}
})
.state('home.ReportOngoingTab',{
url:'',
views: {
"reportView": {
templateUrl: 'views/homeTabs/reportOngoing.html',
}
}
})
..some codes here..
我找到了此鏈接,並很好地描述了如何在頁面中加載嵌套視圖和多個視圖:
https://scotch.io/tutorials/angular-routing-using-ui-router
.state('home', {
url: '/home',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: 'home.tpl.html' },
// the child views will be defined here (absolutely named)
'columnOne@home': {
template: 'child1.tpl.html',
controller: ''
},
// for column two, we'll define a separate controller
'columnTwo@home': {
templateUrl: 'child2.tpl.html',
controller: ''
}
}
});
Index.html
<div ui-view></div><!-- parent view renders home.tpl.html-->
在home.tpl.html中聲明要顯示的已編譯視圖
<!-- chiled views -->
<div class="col-sm-6">
<div ui-view="columnOne"></div>
</div>
<div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.