主页面代码（发现Bootstrap官网上手风琴的实例样式有问题，在这里依然使用3.0.~版本）
<!DOCTYPE html> <html ng-app="ct"> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/> <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-r.css"/> </head> <body> <hr> <div class="container" ng-controller="c1"> <kittencup-group> <kittencup-collapse ng-repeat="collapse in Data" head="collapse.a"> <span ng-bind="collapse.b"></span> </kittencup-collapse> </kittencup-group> </div> </body> <script src="../angular.js"></script> <script> var app = angular.module("ct",[]); app.factory("Data",function(){ return [ { a:"错你妹啊", b:"contents1" }, { a:"title2", b:"contents2" } ] }); app.controller("c1",['$scope','Data', function($scope,Data){ //由ctrl拿到数据加载给view $scope.Data = Data; }]); app.directive('kittencupGroup', function(){ return { restrict:"EA", transclude:true, replace:true, template:"<div class='panel-group' ng-transclude></div>", controller:function(){ this.collapseGroup = []; this.otherClose = function(currCollaps){ angular.forEach(this.collapseGroup, function(collaps){ if(collaps !== currCollaps){ collaps.isOpen = true; } }); } } } }); app.directive('kittencupCollapse', function(){ return { restrict:"EA", require:"^kittencupGroup", replace:true, templateUrl:"templates/contents.html", transclude:true, scope:{ head:"=" }, link: function(scope, elements, attrs, superCtrl){ scope.isOpen = true; scope.open = function(){ scope.isOpen = !scope.isOpen; superCtrl.otherClose(scope); }; superCtrl.collapseGroup.push(scope); } } }); </script> </html>
模板代码：
<div class="panel panel-default"> <div class="panel-heading" ng-click="open()"> <h4 class="panel-title"> <a href="#collapseOne"> <span ng-bind="head"></span> </a> </h4> </div> <div class="panel-collapse" ng-class="{collapse: isOpen}"> <div class="panel-body" ng-transclude> </div> </div> </div>