<!doctype html> <html lang="en" ng-app="expanderModule"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> <style> .expander{border:solid 1px black;width: 250px;} .expander>.title{background-color: black;color: white;padding: .1em .3em; cursor: pointer;} .expander>.body{padding: .1em .3em;} </style> </head> <body> <div ng-controller="SomeController"> <expander class="expander" expander-title="title"> {{title}} </expander> </div> <script> var app = angular.module('expanderModule', []); app.controller('SomeController', function ($scope) { $scope.title = '点击展开'; $scope.text = 'This is section !' }) .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 () { scope.showMe = !scope.showMe; } } } }); </script> </body> </html>
<!doctype html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="lib/angular.js"></script> <style> .expander{border:solid 1px black;width: 250px;} .expander>.title{background: black;color: white;padding: .1em .3em;cursor: pointer;} .expander>.body{padding: .1em .3em;} </style> </head> <body ng-controller="SomeController"> <accordion> <expander class="expander" ng-repeat="expander in expanders" expander-title="expander.title"> {{expander.text}} </expander> </accordion> <script> var app = angular.module('myApp', []); app.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); } } } }); app.directive('expander', function () { return { restrict: 'EA', replace: true, transclude: true, require: '^?accordion', 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, accordionController) { scope.showMe = false; accordionController.addExpander(scope); scope.toggle = function toggle() { scope.showMe = !scope.showMe; accordionController.gotOpened(scope); } } } }); app.controller('SomeController', function ($scope) { $scope.expanders = [{title: 'Click me to expand', text: 'Hi there folks, I am the content that was hidden but is now shown.'}, {title: 'Click this', text: 'I am even better text than you have seen previously'}, {title: 'Test', text: 'test'}]; }) </script> </body> </html>