angularjs transclude demo

<!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>

相关阅读:
【Alpha】Scrum Meeting 10
【Alpha】Scrum Meeting 9
【Alpha】Scrum Meeting 8
【Alpha】Scrum Meeting 7
团队项目拆解
 【Alpha】Scrum Meeting 6
【Alpha】Scrum Meeting 5
servlet转发与重定向区别
 servlet中request和response
Java Web之Servlet中response、request乱码问题解决
原文地址：https://www.cnblogs.com/wangwenfei/p/angularjstransclude.html