<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> 

app.directive('myDirective',function(){
return {
//restrict: 默認(rèn)為A（屬性，默認(rèn)值）<div my-directive=''></div> E（元素）C（類名）M（注釋）
//這里考慮到瀏覽器的兼容性通常我們用所有瀏覽器都認(rèn)識(shí)的A類型
restrict: 'A',
//優(yōu)先級(jí)設(shè)置,默認(rèn)是0,較大的優(yōu)先調(diào)用
priority: 0,
//這個(gè)參數(shù)用來告訴AngularJS停止運(yùn)行當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令。但同當(dāng)前指令優(yōu)先級(jí)相同的指令還是會(huì)被執(zhí)行。
terminal: false,
//字符串或函數(shù): 字符串<a></a>(指令內(nèi)容)
//注：必須存在一個(gè)根DOM元素
//一個(gè)可以接受兩個(gè)參數(shù)的函數(shù)，參數(shù)為tElement和tAttrs，并返回一個(gè)代表模板的字符串 
//function(tElement, tAttrs) { ... }
template: '', 
//從指定的url地址加載模板
templateUrl: '',
//如果設(shè)置了這個(gè)參數(shù)，值必須為true
replace: false,
//指定指令的作用域
scope:'',
//
transclude:'',
//string
//function(scope, element, attrs, transclude, otherInjectables) { ... }
controller:'',
//
controllerAs: '',
//
require: '',
//以編程的方式操作DOM，包括添加監(jiān)聽器等
link: function postLink(scope, iElement, iAttrs) {},
//
compile: // 返回一個(gè)對(duì)象或連接函數(shù)，如下所示：
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { },
post: function(scope, iElement, iAttrs, controller) { }
}
// 或者
return function postLink() { }
};
};
}) 

<style type="text/css">
.con {
margin: 0 auto;
width: 600px;
margin-top: 100px;
}
.panel {
width: 580px;
}
.panel-heading {
cursor: pointer;
}
</style>
<link rel="stylesheet"  />
<div class="con" ng-app="myApp" ng-controller="myCtrl">
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.directive('myPage', function () {
return {
restrict: 'EA',
replace: true,
transclude: true, //是否將元素內(nèi)容轉(zhuǎn)移到模版中
scope: {
title: "=pageTitle"
},
template: [
'<div class="panel panel-info">',
'<div class="panel-heading" ng-click="toggle();">',
'<h3 class="panel-title" >{{title}}</h3>',
'</div>',
'<div class="panel-body" ng-show="showMe" ng-transclude></div>',
'</div>'
].join(""),
link: function (scope, element, attrs) {
scope.showMe = false;
scope.$parent.addExpander(scope); //保存所有菜單
scope.toggle = function toggle() {
scope.showMe = !scope.showMe; //隱藏顯示
scope.$parent.goToExpander(scope);
}
}
};
})
app.controller('myCtrl', function ($scope) {
$scope.expanders = [{
title: 'AngularJS',

text: 'AngularJS 誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購(gòu)。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴注入等等。'


}, {
title: 'jQuery',
text: 'JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁面保持代碼和html內(nèi)容分離，也就是說，不用再在html里面插入一堆js來調(diào)用命令了，只需要定義id即可。'
}, {
title: 'Bootstrap',
text: 'Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。 它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國(guó)廣播公司）的Breaking News都使用了該項(xiàng)目。 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。'
}];
var expanders = []; //記錄所有菜單
$scope.addExpander = function (expander) {
expanders.push(expander);
};
$scope.goToExpander = function (selectedExpander) {
expanders.forEach(function (item, index) {
if (item != selectedExpander) { //隱藏非當(dāng)前選項(xiàng)卡
item.showMe = false;
}
})
}
});
</script>