最近在和同學(xué)忙一個(gè)創(chuàng)業(yè)的項(xiàng)目，博客更新的不是很多，今天下午剛好下雨，就寫一個(gè)通過指令嵌套實(shí)現(xiàn)tabs功能的指令模塊，這也是我在一個(gè)項(xiàng)目中應(yīng)用到的。<p>
jdfw.gif
首先先來說一下指令嵌套，指令嵌套顧名思義就是兩個(gè)以上的指令嵌套在一起，比如下面這樣：
<A-deirective>
<B-directive></B-directive>
<C-directive></C-directive>
</A-directive>
下面這個(gè)tabs功能的指令，剛好用到了這個(gè)，可以讓代碼更加簡潔。</br>
<!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"><!--內(nèi)層指令-->
<h4>One</h4>
<p>angularangularangularangularangularangularangular</p>
</my-pane>
<my-pane tittle="TWO"><!--內(nèi)層指令-->
<h4>Two</h4>
<p>angularangularangularangularangularangularangular</p>
</my-pane>
<my-pane tittle="THERE"><!--內(nèi)層指令-->
<h4>There</h4>
<p>bootstrapbootstrapbootstrapbootstrapbootstrapbootstrap</p>
</my-pane>
<my-pane tittle="FIVE"><!--內(nèi)層指令-->
<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讓最內(nèi)層指令來繼承外層指令，這樣內(nèi)層就可以通過scope的傳導(dǎo)，來與外層指令進(jìn)行數(shù)據(jù)之間的傳遞
var panes = $scope.scopes = [];//
$scope.select= function (pane) {//實(shí)現(xiàn)tabs功能
angular.forEach(panes, function (scope) { //遍歷所有內(nèi)存指令scope，統(tǒng)一隱藏內(nèi)容。
scope.selected=false;
});
pane.selected=true;//通過ng-repeat只
};
this.addScope= function (scope) {//由內(nèi)層指令來繼承，把內(nèi)層指令的scope，傳到進(jìn)外層指令進(jìn)行控制
if(panes.length===0){
$scope.select(scope);
}
panes.push(scope);//把內(nèi)層指令數(shù)組，傳入外層指令scope數(shù)組。
}
}]
}
})
.directive("myPane", function () {
return{
restrict:'EA',
scope:{
tittle:'@'
},
transclude: true,
require:'^myTabs',//繼承外層指令
templateUrl:"myPane.html",
link: function (scope, elemenet,attrs,myTabsController) {
myTabsController.addScope(scope);//把內(nèi)層指令的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>
整個(gè)指令的的實(shí)現(xiàn)原理就是通過指令的繼承，把內(nèi)層指令的scope暴露到外層指令中，這樣就可以在外層指令控制內(nèi)層指令的顯示。這里還有另外一個(gè)要說明的，為了讓指令更加有層次，更加有邏輯性，使用了<code>ng-transclude</code>，讓指令的template內(nèi)容，反向插入到標(biāo)有<code>ng-transclude</code>的內(nèi)容中。
