在一个项目中的同一个模块中，有多个tab（并且多个tab对应的页面结构完全一样）,tab的每次切换，不同tab调用不同的接口，利用一个switch进行判断，根据当前的类型去调用不同的接口，返回不同数据了，实现页面数据的刷新，
这样做的目的是为了减少html页面的重复，实现代码的复用...........................
（存在的问题，每次的页面刷新，只是数据的刷新，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
时间： 2024-11-04 19:49:51