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>