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 toggle(){
scope.showMe=!scope.showMe;
}
}
}
});
expanderModule.controller('SomeController',function($scope){
$scope.title='点击展开';
$scope.text='这里是内部的内容';
});
<!DOCTYPE html>
<html lang="en" ng-app='expanderModule'>
<head>
<meta charset="UTF-8">
<title>Angular.js</title>
</head>
<style type="text/css">
.expander {
border: 1px solid black;
width: 250px;
}
.expander>.title {
background-color: black;
color: white;
padding: .1em .3em;
cursor: pointer;
}
.expander>.body {
padding: .1em .3em;
}
</style>
<body>
<div ng-controller='SomeController'>
<expander class='expander' expander-title='title' ng-cloak>
{{text}}
</expander>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Angular.js"></script>
<script src="angular-route.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
