用AngularJS的指令实现tabs切换效果
程序员文章站
2022-06-29 16:19:13
先来看看效果图
首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样：
<...
先来看看效果图
首先先来说一下指令嵌套，指令嵌套顾名思义就是两个以上的指令嵌套在一起，比如下面这样：
<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能有所帮助，如果有疑问可以留言交流。谢谢大家对的支持。