用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 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
jQuery的缓存机制浅析
Jun 07 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
详解php反序列化
2020/06/10 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
原生js实现淘宝购物车功能
2020/06/23 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
python 定时修改数据库的示例代码
2018/04/08 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
如何定义TensorFlow输入节点
2020/01/23 Python
用python批量下载apk
2020/12/29 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
安全资料员岗位职责
2013/12/14 职场文书
大学生毕业鉴定
2014/01/31 职场文书
运动会稿件50字
2014/02/17 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
设计师求职信
2014/07/01 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
防灾减灾标语
2014/10/07 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
个人年底工作总结
2015/03/10 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
信仰纪录片观后感
2015/06/08 职场文书
李强为自己工作观后感
2015/06/11 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python