項目中遇到了嵌套ui-view時,點擊ui-sref無效的現象,通過分析問題解決了該問題,記錄一下.
問題背景:
在anjularjs + electron項目中需要在同一個界面保持部分div不變,點擊按鈕切換其他部分div.
如圖所示,左邊的map部分需要保留,右側的div動態部分需要點擊菜單的按鈕進行動態切換html.(還沒有寫css,界面較醜)
由於技術有限,沒有在angularjs中找到ui-view共同顯示的方法,所以使用了ui-view嵌套疊加的方法.
app.js
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("/","/index");
$stateProvider
.state('index', {
url: '/index',
views: {
'IndexPart': {
templateUrl: ('views/IndexPage.html'),
controller: 'indexPage',
controllerAs: 'iPage'
}
},
})
.state('index.Home', {
url: '/Home',
views: {
'methodControl@index': {
templateUrl: ('views/HomeCtrl.html'),
controller: 'homeCtrl',
controllerAs: 'hCtrl'
}
},
})
.state('index.Multiple', {
url: '/Multiple',
views: {
'methodControl@index': {
templateUrl: ('views/MultipleCtrl.html'),
controller: 'multipleCtrl',
controllerAs: 'mCtrl'
}
},
})
.state('index.Construct', {
url: '/Construct',
views: {
'methodControl@index': {
templateUrl: ('views/ConstructCtrl.html'),
controller: 'constructCtrl',
controllerAs: 'cCtrl'
}
},
})
.state('index.Evolution', {
url: '/Evolution',
views: {
'methodControl@index': {
templateUrl: ('views/EvolutionCtrl.html'),
controller: 'evolutionCtrl',
controllerAs: 'eCtrl'
}
},
})
.state('index.Risk', {
url: '/Risk',
views: {
'methodControl@index': {
templateUrl: ('views/RiskCtrl.html'),
controller: 'riskCtrl',
controllerAs: 'rCtrl'
}
},
})
$urlRouterProvider.otherwise('/index');
}
在上述代碼中使用了父子ui-view的方法,先默認將map加載進去,再將子ui-view使用ui-sref加載.
index.html
<body>
<!-- Header -->
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="0" heading="主頁">
<button class="btn btn-success" ui-sref=".Home">0</button>
</uib-tab>
<uib-tab index="1" heading="多源異構數據融合">
<button class="btn btn-success" ui-sref=".Multiple">1</button>
</uib-tab>
<uib-tab index="2" heading="突發事件態勢構建">
<button class="btn btn-success" ui-sref=".Construct">2</button>
</uib-tab>
<uib-tab index="3" heading="突發事件動態演化分析">
<button class="btn btn-success" ui-sref=".Evolution">3</button>
</uib-tab>
<uib-tab index="4" heading="突發事件動態風險評估">
<button class="btn btn-success" ui-sref=".Risk">4</button>
</uib-tab>
</uib-tabset>
<!-- /Header -->
<!-- Main -->
<div ui-view="IndexPart"></div>
</body>
按照網上的方法,使用嵌套ui-view的方法
存在問題:
頁面加載刷新之後,按鈕只可以點擊一次,加載一個html,之後再點擊也沒有用了.
使用了網上查詢的方法
方法一(刷新整體界面)
<button class="btn btn-success" ui-sref=".Construct" ui-sref-opt="{reload:'true'}">0</button>
方法二(刷新當前界面)
<button class="btn btn-success" ui-sref=".Construct" ui-sref-opt="{reload:'.Construct'}">0</button>
都沒有起到作用,網上方法大概就這樣,其他的沒有細究.
分析原因:
我的代碼中父ui-view是默認加載的,沒有通過ui-sref加載,所以我試驗了添加一個按鈕:
<button class="btn btn-success" ui-sref="index">0</button>
點擊這個按鈕過後再嘗試點擊其他的按鈕就可以,不過也都只能點一次.
所以我想可不可以在點擊按鈕的時候先加載父ui-view的index路由,再加載需要的子ui-view
<button class="btn btn-success" ui-sref="index.Home">0</button>
結果成功解決問題,寫在這裏供大家參考,希望可以爲大家提供幫助.
剛開始學習angularjs和electron,歡迎大家互相交流.