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


Posted in Javascript onAugust 31, 2016

先来看看效果图

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

Javascript 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
node.js +mongdb实现登录功能
Jun 18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 #Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 #Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 #Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 #Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 #Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 #Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 #Javascript
You might like
第六章 php目录与文件操作
2011/12/30 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Python浅复制中对象生存周期实例分析
2018/04/02 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
给女儿的表扬信
2014/01/18 职场文书
六年级数学教学反思
2014/02/03 职场文书
电子信息专业自荐书
2014/02/04 职场文书
财务人员的自我评价范文
2014/03/03 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
家装电话营销开场白
2015/05/29 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Python3 如何开启自带http服务
2021/05/18 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python