用AngularJS的指令实现tabs切换效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了用AngularJS的指令实现tabs切换效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3284字，纯文字阅读大概需要5分钟。
内容图文
先来看看效果图
首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样：
<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的指令实现tabs切换效果全部内容，希望文章能够帮你解决用AngularJS的指令实现tabs切换效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。