用AngularJS的指令实现tabs切换效果  更新时间:2016年08月31日 14:36:35   作者:MakingChoice   这篇文章介绍的是写一个通过指令嵌套实现tabs功能的指令模块,这也是我在一个项目中应用到的,现在分享给大家,有需要的可以参考借鉴。 先来看看效果图 首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁。 One angularangularangularangularangularangularangular Two angularangularangularangularangularangularangular There bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap five jqueryjqueryjqueryjqueryjqueryjqueryjquery 整个指令的的实现原理就是通过指令的继承,把内层指令的scope暴露到外层指令中,这样就可以在外层指令控制内层指令的显示。这里还有另外一个要说明的,为了让指令更加有层次,更加有逻辑性,使用了ng-transclude,让指令的template内容,反向插入到标有ng-transclude的内容中。 结束语 好了,以上就是AngularJS通过指令实现tabs切换功能的全部内容,大家都学会了吗?希望对大家学习AngularJS能有所帮助,如果有疑问可以留言交流。谢谢大家对脚本之家的支持。 您可能感兴趣的文章: AngularJS实现动态切换样式的方法分析 AngularJS标签页tab选项卡切换功能经典实例详解 详解AngularJS ng-class样式切换 angularJs的ng-class切换class 使用AngularJS2中的指令实现按钮的切换效果 AngularJS路由切换实现方法分析 AngularJS实现使用路由切换视图的方法 AngularJS入门教程之多视图切换用法示例 使用AngularJS实现可伸缩的页面切换的方法 angularjs实现Tab栏切换效果 angularjs 指令 tabs 切换 相关文章 AngularJs 常用的过滤器 本篇文章主要介绍了AngularJs常用的过滤器。具有很好的参考价值。下面跟着小编一起来看下吧 2017-05-05 详解angular中的作用域及继承 本篇文章主要介绍了详解angular中的作用域及继承,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题 今天小编就为大家分享一篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 详解Angular5 服务端渲染实战 本篇文章主要介绍了详解Angular5 服务端渲染实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 Angular实现的table表格排序功能完整示例 这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下 2017-12-12 AngularJS实现元素显示和隐藏的几个案例 这篇文章主要介绍了AngularJS实现元素显示和隐藏的几个案例,需要的朋友可以参考下 2015-12-12 Angularjs中ng-repeat的简单实例 这篇文章主要介绍了Angularjs中ng-repeat的简单实例的相关资料,这里提供两个实例方法帮助大家彻底掌握这部分内容,需要的朋友可以参考下 2017-08-08 angularjs之$timeout指令详解 本篇文章主要主要介绍了angularjs之$timeout指令详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 详解JavaScript的AngularJS框架中的作用域与数据绑定 这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下 2016-03-03 Angular2使用Angular CLI快速搭建工程(一) 这篇文章主要介绍了Angular2使用Angular CLI快速搭建工程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 最新评论

先来看看效果图

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

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

您可能感兴趣的文章:

  • AngularJS实现动态切换样式的方法分析
  • AngularJS标签页tab选项卡切换功能经典实例详解
  • 详解AngularJS ng-class样式切换
  • angularJs的ng-class切换class
  • 使用AngularJS2中的指令实现按钮的切换效果
  • AngularJS路由切换实现方法分析
  • AngularJS实现使用路由切换视图的方法
  • AngularJS入门教程之多视图切换用法示例
  • 使用AngularJS实现可伸缩的页面切换的方法
  • angularjs实现Tab栏切换效果
张贴在3