Angularjs 手风琴效果(组织架构)

很多人都遇到过这个问题，怎样实现手风琴效果，bootstrap可以实现页面，但是数据交互又是个问题。于是乎Angularjs的指令很好的解决了这个问题，经过查资料整理，将结果放到这，希望大家多多指正。

1,HTML

<my-page ng-repeat="item in expanders" page-title="item.title">
    <p>{{items.text}}</p> //或者写其他HTML片段
</my-page>

2,JS

app.directive('myPage', function () {
    return {
        restrict: 'EA',
        replace: true,
        transclude: true,
        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', ['$scope','$http',function ($scope,$http) {
    $scope.expanders = [{
        title: '人力资源部',
        text: '人力资源部'
    }, {
        title: '财务部',
        text: '财务部'
    }, {
        title: '行政部',
        text: '行政部'
    }];
    var expanders = []; //记录所有菜单
    $scope.addExpander = function (expander) {
        expanders.push(expander);
    };
    $scope.goToExpander = function (selectedExpander) {
        expanders.forEach(function (item, index) {//隐藏非当前选项卡,实现切换功能
            if (item != selectedExpander) {
                item.showMe = false;
            }
        })
    };
}]);

3,效果图