146
6
章 ディレクティブ
angular.module('expanderModule', []) .directive('expander', function(){
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: { title: '=expanderTitle' },
template: '<div>' +
'<div class="title">{{title}}</div>' +
'<div class="body closed" ng-transclude></div>' +
'</div>',
link: function(scope, element, attrs) {
var titleElement = angular.element(e
lement.children().eq(0));
var bodyElement = angular.element(element.children().eq(1));
titleElement.bind('click', toggle);
function toggle() {
bodyElement.toggleClass('closed');
}
}
}
});
テンプレートから
ng-click
と
ng-show
の各ディレクティブを削除しました。ユーザーがセク
ションのタイトルをクリックしたときに適切な処理を行えるよう、タイトルの要素から