欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用AngularJS的指令实现tabs切换效果

程序员文章站 2022-06-29 16:19:13
先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: <...

先来看看效果图

用AngularJS的指令实现tabs切换效果

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

<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能有所帮助,如果有疑问可以留言交流。谢谢大家对的支持。