关于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