To be or not to be.That is a question!

---源于莎士比亚的《哈姆雷特》

导航

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>

 

posted on 2014-04-08 13:23  Ijavascript  阅读(610)  评论(0)  编辑  收藏  举报