用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 相关文章推荐
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Move.js入门
Feb 08 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jQuery使用post方法提交数据实例
2015/03/25 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
vue中appear的用法
2017/08/17 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
js实现购物车功能
2018/06/12 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python3 翻转二叉树的实现
2019/09/30 Python
使用Python实现画一个中国地图
2019/11/23 Python
python实现飞机大战项目
2020/03/11 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
自我鉴定写作要点
2014/01/17 职场文书
结对共建工作方案
2014/06/02 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
用电申请报告范文
2015/05/18 职场文书
婚宴新娘致辞
2015/07/28 职场文书