先来看看效果图

首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样：

指令指令下面这个制表符功能的指令，刚好用到了这个，可以让代码更加简洁。

！DOCTYPE html html lang=' en ' ng-app=' docstassemple ' head meta charset=' UTF-8 ' title/title script/script src=' http 3360 lib/angular。量滴js ' type=' text/JavaScript '/script script src=' http : lib/angular-route。js ' type=' text/JavaScript '/script script src=' http 3360 lib/jquery-2。1 .4 .量滴射流研究…活动{ background:红色；}/style/head body ng-controller=' appCon ' my-tab！-最外层指令-我的窗格tittle=' ONE '！-内层指令-h4One/H4 pangularangulangularangular/p/my-pane my-pane title=' TWO '！-内层指令-H4two/H4 pangularangulangulangulangulagular/p/my-pane my-pane tittle='那边！-内层指令H4有/H4 pbootstrapbootstrapbootstrapbootstrapbootstrapbootstrapbootstrapbootstrap/p/my-pane my-pane title=' FIVE '！-内层指令-h45/H4 pjqueryjqueryjqueryjquery/p/my-pane/my-tab/body脚本var app=angular。模块(' docstabsesample '，['template']).控制器(' appCon '，['$scope '，函数($scope){ }]).指令(“我的标签”，函数(){ return{ restrict:'EA '，transclude: true，作用域： }，模板URL : ' mytab。html '，controller:['$scope '，function ($scope) {//使用控制器让最内层指令来继承外层指令，这样内层就可以通过范围的传导，来与外层指令进行数据之间的传递var panes=$ scope。scopes=[]；//$作用域。选择=函数(窗格){//实现制表符功能angular.forEach(窗格，函数（范围){ //遍历所有内存指令范围，统一隐藏内容scope . selected=false })；pane.selected=true//通过尼日利亚重复只};this.addScope=函数（作用域){//由内层指令来继承，把内层指令的范围，传到进外层指令进行控制if(窗格。长度===0){ $ scope。选择(范围)；} panes.push(作用域);//把内层指令数组，传入外层指令范围数组。 } }] } }) .指令(“我的窗格”，函数(){ return{ restrict:'EA '，scope:{ tittle:'@' }，transclude : true,require:'^mytabs',//继承外层指令templateUrl:'myPane.html '，link:函数（作用域，榄香烯，attrs，mytabstroller){ mytabstroller。addscope(作用域);//把内层指令的范围存入到外层指令中，让外层遍历。 } } });angular.module('template '，[]).运行(['$templateCache '，函数($模板缓存){ $模板缓存。放(' mytab。html '，' div class=' table ' ' ' ul class=' nav-tab ' ' ' Li ng-repeat='窗格中的' scopes ' ng-class=' { active :窗格。selected }“”a href=“#”ng-click=“select(pane)”{ { pane。title } } a/' '/Li ' '/ul ' ' div-trans clude class=' tab-content '/div ' '/div ')}运行(['$templateCache '，函数($ template cache){ $ template cache。放(' mypane。html '，' div class=' table-pane ' ng-show=' selected ' ng-trans clude ' '/div ')})/script/html整个指令的的实现原理就是通过指令的继承，把内层指令的范围暴露到外层指令中，这样就可以在外层指令控制内层指令的显示。这里还有另外一个要说明的，为了让指令更加有层次，更加有逻辑性，使用了ng-transclude，让指令的模板内容，反向插入到标有ng-transclude的内容中。

结束语

好了，以上就是AngularJS的tab切换功能通过说明的全部内容。你学会了吗？希望对大家学习AngularJS有帮助。有问题可以留言交流。谢谢你的支持。