tab页 html子页面,关于tab的切换之共用html页面

在一个项目中的同一个模块中，有多个tab(并且多个tab对应的页面结构完全一样),tab的每次切换，不同tab调用不同的接口，利用一个switch进行判断，根据当前的类型去调用不同的接口，返回不同数据了，实现页面数据的刷新，

这样做的目的是为了减少html页面的重复，实现代码的复用...........................

(存在的问题，每次的页面刷新，只是数据的刷新，url没有进行更新，这会导致一个问题，那就是点击浏览器刷新页面的时候，不能记录当前的状态，每次都会返回到最初的页面，而不能记录当前的位置)

存在弊端的代码展示：

html：每次的tab切换，都会调用get_list()方法，这个方法会传递一个类型过去用于做判断

裁判文书

行业会议

老李说知产

人才报告

资讯

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

原文：http://www.cnblogs.com/evaling/p/6801640.html