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
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[index].type="hide";

}

},

//切换tab页面

changeTab:function(id){

this.hideAll();

for(var index=0;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
if(this.list[index].id==currentTab.id){

this.list.splice(index,1);

break;

}

}

//切换到父页面

this.changeTab(currentTab.parentId);

}

}

};

var template=

'

'

+'
• {{obj.name}}
'

+'

'

+'

';


element.html(template);

return function($scope,element,attrs){

tab.close=function(id){

var index=0;

for(;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;

}]);