用AngularJS的指令实现tabs切换效果
更新时间：2016年08月31日 14:36:35 作者：MakingChoice
这篇文章介绍的是写一个通过指令嵌套实现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能有所帮助，如果有疑问可以留言交流。谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了AngularJS 模块化，这里整理了详细的资料及简单实例代码，实现效果图，有需要的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS的脏检查深入分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了剖析Angular Component的源码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
本文主要介绍AngularJs 指令的知识，这里整理了详细的资料和简单示例代码帮助大家学习理解应用，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了掌握Queries设计模式优化Angular应用开发的技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下2014-12-12
Angular2中如何使用ngx-translate进行国际化
本篇文章主要介绍了Angular2中使用ngx-translate进行国际化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了简单说说angular.json文件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了使用AngularJS创建自定义的过滤器的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下2015-06-06
详解AngularJS用Interceptors来统一处理HTTP请求和响应
本篇文章主要介绍了AngularJS用Interceptors来统一处理HTTP请求和响应 ，具有一定的参考价值，有兴趣的可以了解一下2017-06-06
最新评论