实现
demo源码托管于github，详见Github gcidea/angular-tabs
概述
承载该表格插件的主要模板html结构如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| template: '<div id="{{$ctrl.componentId}}" class="module-tabs">'+
'<div class="tab-label">'+
'<ul class="main-tabs">'+
'<li class="glyphicons">'+
'<span class="glyphicon glyphicon-home">'+
'</span>'+
'</li>'+
'<li ng-repeat="pane in $ctrl.showPanes" ng-class="{active:pane.selected}" '+
'ng-mousedown="$ctrl.paneClick($event,pane,$index)"'+
'oncontextmenu="javascript:return false;" onmousemove="javascript:return false;" ng-style="pane.paneStyle">'+
'<label ng-bind="pane.title" title="{{pane.title}}"></label>'+
'<button ng-click="$ctrl.close(pane)"></button>'+
'</li>'+
'</ul>'+
'<div ng-if="$ctrl.rightMenu" class="tab-menu" oncontextmenu="javascript:return false;">'+
'<ul class="dropdown-menu" ng-style="$ctrl.menuStyle">'+
'<li ng-click="$ctrl.closeAll()">关闭全部</li>'+
'<li ng-click="$ctrl.closeOther()">关闭其他标签页</li>'+
'</ul>'+
'</div>'+
'<div ng-if="$ctrl.moreTab" class="more-tab">'+
'<button ng-click="$ctrl.openMoreTab()" class="more-tab-btn"></button>'+
'</div>'+
'</div>'+
'<div ng-show="$ctrl.moreTabContent" class="more-tabContent" ng-style="$ctrl.mTCStyle">'+
'<div ng-repeat="pane in $ctrl.morePanes" class="more-panes" ng-click="$ctrl.show(pane)">'+
'<label ng-bind="pane.title" title="{{pane.title}}"></label>'+
'<button ng-click="$ctrl.close(pane)"></button>'+
'</div>'+
'</div>'+
'<div class="tab-content">'+
'<div id="{{pane.id}}" ng-show="pane.selected" ng-repeat="pane in $ctrl.panes">'+
'<pane pane-content="pane" is-active="pane.selected" xmlns="custom"/>'+
'</div>'+
'</div>'+
'</div>'
|
主要逻辑解释
数据绑定
1
2
3
4
5
6
| bindings:{
showLength:'@',
maxLength:'@',
container:'@',
initTab:'='
},
|
