关于tab的切换之共用html页面,而引发的页面跳转错乱问题
在一个项目中的同一个模块中，有多个tab（并且多个tab对应的页面结构完全一样）,tab的每次切换，不同tab调用不同的接口，利用一个switch进行判断，根据当前的类型去调用不同的接口，返回不同数据了，实现页面数据的刷新，
这样做的目的是为了减少html页面的重复，实现代码的复用...........................
（存在的问题，每次的页面刷新，只是数据的刷新，url没有进行更新，这会导致一个问题，那就是点击浏览器刷新页面的时候，不能记录当前的状态，每次都会返回到最初的页面，而不能记录当前的位置,有可能发生页面跳转错乱的问题<一般就是你的url没有更新引起的>）
存在弊端的代码展示：
html：每次的tab切换，都会调用get_list（）方法，这个方法会传递一个类型过去用于做判断
<ul class="list-inline"> <li class="hand" ng-click="get_list('裁判文书')"> <button class="btn my-tra-btn" ng-class="{'my-nav-active':position_type=='裁判文书'}">裁判文书</button></li> <li class="hand" ng-click="get_list('行业会议')"> <button class="btn my-tra-btn" ng-class="{'my-nav-active':position_type=='行业会议'}">行业会议</button></li> <li class="hand" ui-sref="laoli_video({type:'老李说知产'})"> <button class="btn my-tra-btn" ng-class="{'my-nav-active':position_type=='老李说知产'}">老李说知产</button></li> <li class="hand" ng-click="get_list('人才报告')"> <button class="btn my-tra-btn" ng-class="{'my-nav-active':position_type=='人才报告'}"> 人才报告</button></li> <li class="hand" ng-click="get_list('资讯')"> <button class="btn my-tra-btn" ng-class="{'my-nav-active':position_type=='资讯'}">资讯</button></li> </ul>
js：ctrl/consult.js文件(利用angular-require的方法将多个小控制器放入一个文件中)
define(['app', 'services/filter', 'services/setting', 'api/news_api', 'services/common', 'directives/showimg/showimg', 'directives/sharecomponent/sharecomponent'], function (myapp) {
myapp.controller('news_list', ['$scope', '$state', '$stateParams', 'news_api', function (s, $state, $stateParams,news_api){
//获得列表数据
s.get_list = function (typename) {//typename:用于标识tab的切换
s.mypagers.bigCurrentPage = 1;//当前页归 "1"
typename = typename;
get_list_by_type(typename, s.mypagers.bigCurrentPage);
}
s.get_list(s.position_type);
function get_list_by_type(typename, n) {
switch (typename) {
case "裁判文书" :
{
s.hand_data.pPageIndex = n;//没测切换都要更新当前的页码
news_api.get_judge_document_list(s.hand_data)
.success(function (data) {
...........//
})
.error(function (data) {
console.log(data);
});
}
;
break;
case "行业会议" :
{
s.position_type = "行业会议";
s.current_nav = "行业会议";
news_api.get_file_meeting_list({pageIndex: n, pageSize: 10})
.success(function (data) {
.................//
})
.error(function (data) {
console.log(data);
});
}
;
break;
case "人才报告" :
{
s.position_type = "人才报告";
s.current_nav = "人才报告";
news_api.get_human_resource_report_list({pageIndex: n, pageSize: 10}).success(function (data) {
.................//
}).error(function (data) {
console.log(data);
});
}
;
break;
case "资讯" :
{
s.position_type = "资讯";
s.current_nav = "资讯";
news_api.gethotnews({pageIndex: n, pageSize: 10})
.success(function (data) {
.................//
})
.error();
}
;
break;
}
}
myapp.controller('news_detaile', ['$scope', '$stateParams', '$sce', 'setting', 'news_api', '$rootScope',
function (s, $stateParams, $sce, setting, news_api, $rootScope) {
...................//////////
}]
});
路由配置：
router.js中： //行业会议，咨询，人才报告 define(['app', 'env', 'router/news', 'ctrl/rootctrl', 'router/about', 'router/badComment', 'router/collect_doc', 'router/consult' ], function (myapp, env) { $stateProvider.state('consult', { url: '/', views: { "main": { templateUrl: 'tpls/news/news.html', resolve: { deps: $requireProvider.requireJS([//使用angular.require 'ctrl/consult' ]) }, controller: 'news_index_ctrl' } } }); router/consult.js中： define(['app'], function (myapp) { myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$requireProvider', function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) { $stateProvider.state('consult.news_list', { url: 'news_list/:typename.html', views: { 'content': { templateUrl: 'tpls/news/content/news_list.html',//所有的tab，模块都共用一个news_list页面 controller:'news_list' }, 'c_right':{ templateUrl:'tpls/news/c_right/c_right.html', controller:'news_ctrl' } } }) .state('consult.news_detaile', { url: ':itemsid.html', views: { 'content': { templateUrl: 'tpls/news/content/news_detaile.html',
//所有的tab都共用一个详情页面news_detail.html controller: 'news_detaile' }, "c_footer": { templateUrl: 'tpls/news/c_footer/c_footer.html', controller:'c_footer' }, 'c_right':{ templateUrl:'tpls/news/c_right/c_right.html', controller:'news_ctrl' } } }) }]) });
对于上面存在的问题不同人可能会有不同的解决方法。
常见的一种：
1：页面的拆分，将每个tab都单独作为一个模块，分别建立各自的控制器
（弊端：没有实现html页面的公用，这是抛弃了问题，抛弃了利益的做法）
2：第二种就是，可以想办法每次在进行tab切换的时候，都会进行页面的刷新，url让其发生改变，便于浏览器记录。
在原来的基础上，我们只需要简单的改变就可以：
//获得列表数据 s.get_list = function (typename) {//typename:用于标识tab的切换 // s.mypagers.bigCurrentPage = 1;//当前页归 "1" //typename = typename; //get_list_by_type(typename, s.mypagers.bigCurrentPage); //get_list_by_type(typename); $state.go("consult.news_list",{typename:typename});//这是为了刷新页面 } var get_list_data=function(typename, n){ get_list_by_type(typename, n); } get_list_data(s.position_type,s.mypagers.bigCurrentPage);
此后的每次点击tab，都会刷新页面，更新url
