關於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