用AngularJS的指令實現(xiàn)tabs切換效果

更新時間：2016年08月31日 14:36:35 作者：MakingChoice

這篇文章介紹的是寫一個通過指令嵌套實現(xiàn)tabs功能的指令模塊，這也是我在一個項目中應用到的，現(xiàn)在分享給大家，有需要的可以參考借鑒。

先來看看效果圖

首先先來說一下指令嵌套，指令嵌套顧名思義就是兩個以上的指令嵌套在一起，比如下面這樣：

<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"><!--內(nèi)層指令-->
  <h4>One</h4>
  <p>angularangularangularangularangularangularangular</p>
 </my-pane>
 <my-pane tittle="TWO"><!--內(nèi)層指令-->
  <h4>Two</h4>
  <p>angularangularangularangularangularangularangular</p>
 </my-pane>
 <my-pane tittle="THERE"><!--內(nèi)層指令-->
  <h4>There</h4>
  <p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap</p>
 </my-pane>
 <my-pane tittle="FIVE"><!--內(nèi)層指令-->
  <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讓最內(nèi)層指令來繼承外層指令，這樣內(nèi)層就可以通過scope的傳導，來與外層指令進行數(shù)據(jù)之間的傳遞
     var panes = $scope.scopes = [];//

     $scope.select= function (pane) {//實現(xiàn)tabs功能
     angular.forEach(panes, function (scope) { //遍歷所有內(nèi)存指令scope，統(tǒng)一隱藏內(nèi)容。
      scope.selected=false;
     });
     pane.selected=true;//通過ng-repeat只
     };

     this.addScope= function (scope) {//由內(nèi)層指令來繼承，把內(nèi)層指令的scope，傳到進外層指令進行控制
     if(panes.length===0){
      $scope.select(scope);
     }
     panes.push(scope);//把內(nèi)層指令數(shù)組，傳入外層指令scope數(shù)組。
     }
    }]
    }
   })
   .directive("myPane", function () {
    return{
    restrict:'EA',
    scope:{
     tittle:'@'
    },
    transclude: true,
    require:'^myTabs',//繼承外層指令
    templateUrl:"myPane.html",
    link: function (scope, elemenet,attrs,myTabsController) {
     myTabsController.addScope(scope);//把內(nèi)層指令的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>

整個指令的的實現(xiàn)原理就是通過指令的繼承，把內(nèi)層指令的scope暴露到外層指令中，這樣就可以在外層指令控制內(nèi)層指令的顯示。這里還有另外一個要說明的，為了讓指令更加有層次，更加有邏輯性，使用了ng-transclude，讓指令的template內(nèi)容，反向插入到標有ng-transclude的內(nèi)容中。

結(jié)束語

好了，以上就是AngularJS通過指令實現(xiàn)tabs切換功能的全部內(nèi)容，大家都學會了嗎？希望對大家學習AngularJS能有所幫助，如果有疑問可以留言交流。謝謝大家對腳本之家的支持。

您可能感興趣的文章: