[anjularjs] ui-router嵌套ui-view不刷新问题
項(xiàng)目中遇到了嵌套u(yù)i-view時(shí),點(diǎn)擊ui-sref無效的現(xiàn)象,通過分析問題解決了該問題,記錄一下.
問題背景:
在anjularjs + electron項(xiàng)目中需要在同一個(gè)界面保持部分div不變,點(diǎn)擊按鈕切換其他部分div.
圖1 結(jié)構(gòu)框架如圖所示,左邊的map部分需要保留,右側(cè)的div動(dòng)態(tài)部分需要點(diǎn)擊菜單的按鈕進(jìn)行動(dòng)態(tài)切換html.(還沒有寫css,界面較丑)
由于技術(shù)有限,沒有在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的方法,先默認(rèn)將map加載進(jìn)去,再將子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="多源異構(gòu)數(shù)據(jù)融合"><button class="btn btn-success" ui-sref=".Multiple">1</button></uib-tab><uib-tab index="2" heading="突發(fā)事件態(tài)勢(shì)構(gòu)建"><button class="btn btn-success" ui-sref=".Construct">2</button></uib-tab><uib-tab index="3" heading="突發(fā)事件動(dòng)態(tài)演化分析"><button class="btn btn-success" ui-sref=".Evolution">3</button></uib-tab><uib-tab index="4" heading="突發(fā)事件動(dòng)態(tài)風(fēng)險(xiǎn)評(píng)估"><button class="btn btn-success" ui-sref=".Risk">4</button></uib-tab> </uib-tabset> <!-- /Header --><!-- Main --> <div ui-view="IndexPart"></div> </body>按照網(wǎng)上的方法,使用嵌套u(yù)i-view的方法
存在問題:
頁面加載刷新之后,按鈕只可以點(diǎn)擊一次,加載一個(gè)html,之后再點(diǎn)擊也沒有用了.
使用了網(wǎng)上查詢的方法
方法一(刷新整體界面) <button class="btn btn-success" ui-sref=".Construct" ui-sref-opt="{reload:'true'}">0</button> 方法二(刷新當(dāng)前界面) <button class="btn btn-success" ui-sref=".Construct" ui-sref-opt="{reload:'.Construct'}">0</button>都沒有起到作用,網(wǎng)上方法大概就這樣,其他的沒有細(xì)究.
分析原因:
我的代碼中父ui-view是默認(rèn)加載的,沒有通過ui-sref加載,所以我試驗(yàn)了添加一個(gè)按鈕:
<button class="btn btn-success" ui-sref="index">0</button>點(diǎn)擊這個(gè)按鈕過后再嘗試點(diǎn)擊其他的按鈕就可以,不過也都只能點(diǎn)一次.
所以我想可不可以在點(diǎn)擊按鈕的時(shí)候先加載父ui-view的index路由,再加載需要的子ui-view
<button class="btn btn-success" ui-sref="index.Home">0</button>結(jié)果成功解決問題,寫在這里供大家參考,希望可以為大家提供幫助.
剛開始學(xué)習(xí)angularjs和electron,歡迎大家互相交流.
總結(jié)
以上是生活随笔為你收集整理的[anjularjs] ui-router嵌套ui-view不刷新问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker/Docker-Compos
- 下一篇： 制作启动u盘总结 centos6/cen