angularjs tab 实现

angularjs tab 功能实现


功能要求


点击菜单的时候，新增一个tab页面，当关闭一个页面的时候，显示旁边的tab页面

当一个tab页面是从之前的tab打开，例如是一个查询页面的tab页面，打开一个新增页面的时候，当新增页面提交成功后，需要关闭当前页面，并刷新原来的查询页面

实现


通过iframe方式实现


每个tab页面就是一个iframe，不会互相影响功能

各个tab里面的iframe 通过window.top. 方法进行调用下来的几个方法，例如：window.top.openTab

function openTab(id,name,url,params){

                var appElement = document.querySelector('[ng-controller=mainCtrl]');

                var scope=angular.element(appElement).scope();

                scope.myTab.openWithParent(id,name,url,params);

                scope.$apply();

            }

            //在一个tab里面关闭一个页面并回到父页面

function closeToParentTab(){

                var appElement = document.querySelector('[ng-controller=mainCtrl]');

                var scope=angular.element(appElement).scope();

                scope.myTab.closeToParentTab();

                scope.$apply();

            }

            //只是关闭页面

function close(){

                var appElement = document.querySelector('[ng-controller=mainCtrl]');

                var scope=angular.element(appElement).scope();

                scope.myTab.close();

                scope.$apply();

            }




commonApp.directive('myTab',['commonService',function(commonService){

    var myTab = {};

    myTab.restrict="AE";

    myTab.compile=function(element,attrs,$scope){

        var objName=attrs.name;

        if(objName == undefined){

            objName="myTab";

        }

        var tab = {

                list:[],

                getCurrentOpenId:function(){

                    var currentTab=this.getCurrentTab();

                    if(currentTab!=undefined){

                        return currentTab.id;

                    }

                },

                getCurrentTab:function(){

                    for(var index=0;index<this.list.length;index++ ){

                          if(this.list[index].type=="show"){

                              return this.list[index];

                          }

                    }

                },

                //打开一个tab,如果该tab已经存在，就显示，如果没有，新开一个

                open:function(id,name,url){

                    if(!this.changeTab(id)){

                        var elm={};

                        elm.id=id;

                        elm.parentId="";

                        elm.name=name;

                        elm.url=url;

                        elm.type="show";

                        this.list.push(elm);

                    }

                },

                /**

                 * id  新开页面的id

                 * name 新开页面的名称

                 * url   新开页面的地址

                 * params 表示要传入新开页面的参数

                 */

                openWithParent:function(id,name,url){

                    var parentId=this.getCurrentOpenId();

                    var childId=parentId+"_"+id;

                    if(!this.changeTab(childId)){

                        var elm={};

                        elm.id=childId;

                        elm.parentId=parentId;

                        elm.name=name;

                        elm.url=url;

                        elm.type="show";

                        this.list.push(elm);

                    }

                },

                //把所有tab页面变成不可显示

                hideAll:function(){

                    for(var index=0;index<this.list.length;index++ ){

                          this.list[index].type="hide";

                    }

                },

                //切换tab页面

                changeTab:function(id){

                    this.hideAll();

                    for(var index=0;index<this.list.length;index++ ){

                          if(this.list[index].id==id){

                              this.list[index].type="show";

                              return true;

                          }

                    }

                    return false;

                },

                cleanAll:function(){

                    this.list=[];

                },

                closeToParentTab:function(){

                    var currentTab=this.getCurrentTab();

                    if(currentTab!=undefined){

                        //关闭当前的页面

                        for(var index=0;index<this.list.length;index++ ){

                              if(this.list[index].id==currentTab.id){

                                  this.list.splice(index,1);

                                  break;

                              }

                        }

                        //切换到父页面

                        this.changeTab(currentTab.parentId);

                    }

                }

        };

         var template=

             '<ul id="tags" class="subnav" ng-show="'+objName+'.list.length>0">'

            +'<li id="dh1" ng-class="{\'hover\':obj.type==\'show\'}" ng-repeat="obj in '+objName+'.list" ><a href="javascript:void(0)" ng-click="'+objName+'.changeTab(obj.id)" class="a1">{{obj.name}}</a><i class="subnav_icon icon"><a ng-click="'+objName+'.close(obj.id)" href="javascript:void(0)" class="gone"></a></i></li>'

            +'</ul>'

            +'<div ng-repeat="obj in '+objName+'.list" ng-show="obj.type==\'show\'"  ><iframe frameborder="0" style="height:100%;visibility:inherit; width:100%;z-index:1;" ng-src="{{obj.url}}" scrolling="yes"  id="tab_id_{{obj.id}}" ></iframe></div>';


        element.html(template);

        return function($scope,element,attrs){

            tab.close=function(id){

                var index=0;

                for(;index<this.list.length;index++ ){

                      if(this.list[index].id==id){

                          this.list.splice(index,1);

                          break;

                      }

                }

                if(this.list.length==0){

                    $scope.loadIndex();

                }else{

                    var showTabIndex=0;

                    if(index-1>0){

                        showTabIndex=index-1;

                    }

                    this.list[showTabIndex].type="show";

                }


            };

            eval("$scope."+objName+"=tab");

        };

    };

    return myTab;

}]);