先來看看效果圖
首先先來說一下指令嵌套，指令嵌套顧名思義就是兩個以上的指令嵌套在一起，比如下面這樣：
<A-deirective> <B-directive></B-directive> <C-directive></C-directive></A-directive>
下面這個tabs功能的指令，剛好用到了這個，可以讓代碼更加簡潔。
<!DOCTYPE html><html lang="en" ng-app="docsTabsExample"><head> <meta charset="UTF-8"> <title></title> <script></script> <script src="lib/angular.min.js" type="text/javascript"></script> <script src="lib/angular-route.js" type="text/javascript"></script> <script src="lib/jquery-2.1.4.min.js"></script> <script src="lib/bootstrap.js" type="text/javascript"></script> <link rel="stylesheet" href="css/bootstrap.css" type="text/css"/> <style> .active{ background: red; } </style></head><body ng-controller="appCon"> <my-tabs><!--最外層指令--> <my-pane tittle="ONE"><!--內層指令--> <h4>One</h4> <p>angularangularangularangularangularangularangular</p> </my-pane> <my-pane tittle="TWO"><!--內層指令--> <h4>Two</h4> <p>angularangularangularangularangularangularangular</p> </my-pane> <my-pane tittle="THERE"><!--內層指令--> <h4>There</h4> <p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap</p> </my-pane> <my-pane tittle="FIVE"><!--內層指令--> <h4>five</h4> <p>jqueryjqueryjqueryjqueryjqueryjqueryjquery</p> </my-pane> </my-tabs></body><script> var app=angular.module("docsTabsExample",['template']) .controller("appCon",["$scope",function($scope){ }]) .directive("myTabs", function () { return{ restrict:"EA", transclude: true, scope:{}, templateUrl:"myTabs.html", controller:["$scope", function ($scope) {//使用controller讓最內層指令來繼承外層指令，這樣內層就可以通過scope的傳導，來與外層指令進行資料之間的傳遞 var panes = $scope.scopes = [];// $scope.select= function (pane) {//實現tabs功能 angular.forEach(panes, function (scope) { //遍曆所有記憶體指令scope，統一隱藏內容。 scope.selected=false; }); pane.selected=true;//通過ng-repeat只 }; this.addScope= function (scope) {//由內層指令來繼承，把內層指令的scope，傳到進外層指令進行控制 if(panes.length===0){ $scope.select(scope); } panes.push(scope);//把內層指令數組，傳入外層指令scope數組。 } }] } }) .directive("myPane", function () { return{ restrict:'EA', scope:{ tittle:'@' }, transclude: true, require:'^myTabs',//繼承外層指令 templateUrl:"myPane.html", link: function (scope, elemenet,attrs,myTabsController) { myTabsController.addScope(scope);//把內層指令的scope存入到外層指令中，讓外層遍曆。 } } }); angular.module("template",[]) .run(["$templateCache", function ($templateCache) { $templateCache.put("myTabs.html","<div class='table'>" + "<ul class='nav nav-tabs'>" + "<li ng-repeat='pane in scopes' ng-class='{active:pane.selected}'>" + "<a href='#' ng-click='select(pane)'>{{pane.tittle}}<a/>" + "</li>" + "</ul>" + "<div ng-transclude class='tab-content'></div>" + "</div>") }]) .run(["$templateCache", function ($templateCache) { $templateCache.put("myPane.html","<div class='table-pane' ng-show='selected' ng-transclude>" + "</div>") }])</script></html>
整個指令的的實現原理就是通過指令的繼承，把內層指令的scope暴露到外層指令中，這樣就可以在外層指令控制內層指令的顯示。這裡還有另外一個要說明的，為了讓指令更加有層次，更加有邏輯性，使用了ng-transclude，讓指令的template內容，反向插入到標有ng-transclude的內容中。
結束語
好了，以上就是AngularJS通過指令實現tabs切換功能的全部內容，大家都學會了嗎？希望對大家學習AngularJS能有所協助，如果有疑問可以留言交流。謝謝大家對雲棲社區的支援。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
