<!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0"> <link href="https://www.jb51.net/bootstrap.min.css" > <script src="https://www.jb51.net/jquery.min.js"></script> <script src="https://www.jb51.net/angular.min.js"></script> <script src="https://www.jb51.net/bootstrap.min.js"></script> <script type="text/javascript"> var expModule=angular.module('expanderModule',[]) expModule.directive('accordion', function() { return { restrict : 'EA', replace : true, transclude : true, template : '<div ng-transclude></div>', controller : function() { var expanders = []; this.gotOpened = function(selectedExpander) { angular.forEach(expanders, function(expander) { if (selectedExpander != expander) { expander.showMe = false; } }); } this.addExpander = function(expander) { expanders.push(expander); } } } }); expModule.directive('expander', function() { return { restrict : 'EA', replace : true, transclude : true, require : '^?accordion', scope : { title : '=expanderTitle' }, template : '<div>' + '<div ng-click="toggle()">{{title}}</div>' + '<div ng-show="showMe" ng-transclude></div>' + '</div>', link : function(scope, element, attrs, accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); } } } }); expModule.controller("SomeController",function($scope) { $scope.expanders = [{ title : '1', text : '1.1.' }, { title : '2', text : '2.2' }, { title : '3', text : '3.3' }]; }); </script> <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> </head> <body ng-app="expanderModule" ng-controller='SomeController'> <accordion> <expander ng-repeat='expander in expanders' expander-title='expander.title'> {{expander.text}} </expander> </accordion> </body> </html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》