用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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python函数定义和调用过程详解
2020/02/09 Python
python 实现任务管理清单案例
2020/04/25 Python
Python while true实现爬虫定时任务
2020/06/08 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
党委班子对照检查材料
2014/08/19 职场文书
投标单位介绍信
2015/05/05 职场文书
Python函数对象与闭包函数
2022/04/13 Python