[anjularjs] ui-router嵌套ui-view不刷新问题
生活随笔
收集整理的這篇文章主要介紹了
[anjularjs] ui-router嵌套ui-view不刷新问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
項目中遇到了嵌套ui-view時,點擊ui-sref無效的現象,通過分析問題解決了該問題,記錄一下.
問題背景:
在anjularjs + electron項目中需要在同一個界面保持部分div不變,點擊按鈕切換其他部分div.
圖1 結構框架如圖所示,左邊的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,歡迎大家互相交流.
總結
以上是生活随笔為你收集整理的[anjularjs] ui-router嵌套ui-view不刷新问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Docker/Docker-Compos
- 下一篇： 制作启动u盘总结 centos6/cen