项目中遇到了嵌套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,欢迎大家互相交流.
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
