用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 ng-srcset 指令,这里对ng-srcset 指令做了详细的资料整理，附有代码示例，有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了使用Chrome浏览器调试AngularJS应用的方法,AngularJS是非常热门的JavaScript库,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了Angular4表单验证代码详解 ,需要的朋友可以参考下2017-09-09
当Angular项目的规模到达一定的程度，就需要进行测试工作了。为什么要自动化测试？1，提高产出质量。2，减少重构时的痛。反正我最近重构多了，痛苦经历多了。3，便于新人接手。下面这篇文章就给大家详细介绍了Angular.Js的自动化测试，有需要的朋友们可以参考借鉴。2016-12-12
这篇文章主要介绍了AngularJS中数据的双向绑定机制,双向绑定使得HTML中呈现的view与AngularJS中的数据一致,是Angular的重要特性之一,需要的朋友可以参考下2016-03-03
AngularJS 过滤器可用于转换数据，这篇文章主要介绍了详解AngularJS 过滤器的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
今天小编就为大家分享一篇angularjs中判断ng-repeat是否迭代完的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章主要介绍了详解angularjs 学习之 scope作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了详解angular2如何手动点击特定元素上的点击事件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
本文通过实例代码给大家介绍了angularJS 打开新的标签页方法，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
最新评论