angularjs自定义指令---以expander和accordion为例

1、expander

<div ng-controller='SomeController'>
 <expander class='expander' expander-title='title'>
  {{text}}
 </expander>
</div>

var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function() {
	return {
		restrict : 'EA',
		replace : true,
		transclude : true,
		scope : {
		 title : '=expanderTitle'//等值绑定
		},
		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) {
			scope.showMe = false;
			scope.toggle = function() {//指令内部使用，外部调用不到
			 scope.showMe = !scope.showMe;
			}
		}
	}
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
	$scope.text = '这里是内部的内容。';
});

2、accordion

<accordion>
 <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
  {{expander.text}}
 </expander>
</accordion>

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
	return {
		restrict : 'EA',
		replace : true,
		transclude : true,
		template : '<div ng-transclude></div>',
		controller : function() {
			var expanders = [];
			this.gotOpened = function(selectedExpander) {
				angular.forEach(expanders, function(expander) {
					if (selectedExpander != expander) {
						expander.showMe = false;
					}
				});
			}
			this.addExpander = function(expander) {
				expanders.push(expander);
			}
		}
	}
});

expModule.directive('expander', function() {
	return {
		restrict : 'EA',
		replace : true,
		transclude : true,
		require : '^?accordion',//依赖外部的accordion，在下方的link中可接受到第四个参数accordionController
		scope : {
			title : '=expanderTitle'
		},
		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, accordionController) {
			scope.showMe = false;
			accordionController.addExpander(scope);
			scope.toggle = function toggle() {
				scope.showMe = !scope.showMe;
				accordionController.gotOpened(scope);
			}
		}
	}
});

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'
	}];
});

由于自己写过于复杂，可以引用第三方指令库：angular-ui  http://angular-ui.github.io/

使用的时候要导入ui-bootstrap的指令库