1.代码：
<body ng-app="myApp" >
<my-expander title="标题部分">
<h5>中间内容部分</h5>
</my-expander>
<!--<div class="panel panel-primary" >
<div class="panel-heading"></div>
<div class="panel-body"></div>
</div>-->
<script>
</body>
var app = angular.module('myApp',[]);
app.directive('myExpander',function () {
return {
restrict: 'E',replace: true,transclude: true,scope: {
title:'@' //如果使用= 双向绑定失败，因为replace=true 原始标签的title会被删除
},template: '<div class="panel panel-primary" >'
+ ' <div class="panel-heading" ng-click="toggle()">{{title}}</div>'
+ '<div class="panel-body" ng-show="showMe" ng-transclude></div>',link: function (scope,element,attrs) {
scope.showMe = false;
scope.toggle = function toggle() {
scope.showMe = !scope.showMe;
if (scope.showMe) {
scope.title = '点击关闭';
} else {
scope.title = '点击展开';
}
}
}
}
});