HTML5代碼
<html ng-app="expanderModule">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
</head>
<body ng-controller='SomeController' >
<accordion>
<expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
{{expander.text}}
</expander>
</accordion>
</body>
</html>angularjs 腳本
var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
console.log('output accordion define!');
return {
restrict : 'EA', //E-元素，A-屬性，C-樣式類
replace : true, //是否把指令替換成結果
//transclude爲true, 啓用嵌入功能，即當前的指令標籤內的內容(或文本，或是其它指令處理過的文本，這裏是指accordion標籤之內的內容)讀取出來之後放入到，template中有ng-transclude標記的標籤之中，如下的：<div ng-transclude>放入這裏</div>
transclude : true,//是否把指令標籤的內容嵌入指定位置
template : '<div ng-transclude></div>',
controller : function() {
console.log('output accordion controller!');
var expanders = [];
this.gotOpened = function(selectedExpander) {
angular.forEach(expanders, function(expander) {
if (selectedExpander != expander) {
expander.showMe = false;
}
});
}
this.addExpander = function(expander) {
expanders.push(expander);
}
},
link : function(scope, element, attrs, accdCtrl) {
console.log('output accordion link!');
}
}
});
expModule.directive('expander', function() {
return {
restrict : 'EA',
replace : true,
transclude : true,
require : '^?accordion', //^-表示，當前作用域找不到，上父級作用域找，?-表示忽略錯誤繼續執行
//scope: false ：默認值，指令不會新建一個作用域，使用父級作用域。
//scope: true ：指令會創建一個新的子作用域，原型繼承於父級作用域。
//scope: { ... } ：指令會新建一個獨立作用域，不會原型繼承父作用域。
scope : {
title : '=expanderTitle'
},
controller : function() {
console.log('output expander controller!');
},
// 這裏的ng-transclude將存放 expander 標籤內的{{expander.text}}的內容。
template : '<div>'
+ '<div class="title" ng-click="toggle()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',
link : function(scope, element, attrs, accdCtrl) {
scope.showMe = false;
accdCtrl.addExpander(scope);
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
accdCtrl.gotOpened(scope);
}
console.log('output expander link!');
}
}
});
expModule.controller("SomeController",function($scope) {
$scope.expanders = [{
title : 'Click me to expand',
text : 'Hi there folks, I am the content that was hidden but is now shown.'
}, {
title : 'Click this',
text : 'I am even better text than you have seen previously'
}, {
title : 'Test',
text : 'test'
}];
});注：
scope{
title : ‘=expanderTitle’
}
要注意，在js腳本里。需要用駝峯命名法。對應HTML標籤時，把中間的大寫字母前加一連字符’-‘, 再把大寫字母改成小寫。
例：
1. expanderTitle 對應html表示爲 expander-title
2. expanderSubTitle 對應html表示爲 expander-sub-title
scope: { … }
指令會新建一個封閉的作用域。該作用域不會進行原型繼承。這樣的配置通常是你創建可複用組件的最好選擇，因爲這指令不會意外地讀取或修改父級作用域。然而，有些指令通常需要訪問父作用域的數據。設置對象是用來配置父作用域和封閉作用域之間的雙向綁定（使用=）或單向綁定（使用@）。這裏也可以使用&綁定父作用域上的表達式。所以，這些配置都會將來自父作用域的數據創建到本地作用域屬性中。
要注意的是，這些配置選項只是用來設置綁定方式 – 你只能運用Dom元素的屬性引入父作用域的屬性們，而不可以在配置選項中直接引用。比如你想將父作用域的屬性parentProp綁定到封閉的作用域：
和scope: { localProp: ‘@parentProp’}，這不會起作用。我們必須用DOM元素屬性定義指令需要綁定的每一個父作用域屬性：
和scope: { localProp: ‘@theParentProp’ }。
封閉作用域的proto引用的是一個Scope對象。封閉作用域的$parent指向父作用域，所以，雖然該作用域保持封閉而且不會原型繼承於父作用域，但它依舊是一個子作用域。
各指令的調用順序
output accordion define!
output expander define!
output accordion controller!
output accordion link!
output expander controller!
output expander link!
output expander controller!
output expander link!
output expander controller!
output expander link!
