一个示例代码运行了一下报了一个expander undefined的错？ {代码...}

angular.js - angular -PHP中文网问答

一个示例代码运行了一下报了一个expander undefined的错？
<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <style>
        .expander{
            border:1px solid black;
            width:250px;
        }
        .expander>.title{
            background:black;
            cursor:pointer;
            color:#fff;
            padding:.1em .3em;
        }
        .expander>.body{
            padding:.1em .3em;
        }

    </style>
</head>
<body ng-controller="SomeController">
    <!--<p ng-controller="SomeController" >
        <expander class="expander" expander-title="title">
            {{text}}
        </expander>
    </p>-->
    <accordion>
        <expander class="expander" ng-repeat="expander in expanders" expander-title="expander.title">
                    {{expander.text}}
        </expander>
    </accordion>
</body>
<script>
    var appModule=angular.module("myapp",[]);
    appModule.directive("accordion",function(){
        return {
            restrict:"EA",
            replace:true,
            transclude:true,
            template:"<p ng-transclude></p>",
            controller:function(){
                var expanders=[];
                this.gotOpened=function(selectedExpander){
                    angular.forEach(expanders,function(expander){
                        if(selectedExpander!=expander){
                            expander.showMe=false;
                        }
                    });
                };
                this.addExpander=function(){
                    expanders.push(expander)
                }
            }
        }
    });
    appModule.directive("expander",function(){
        return {
            restrict:"EA",
            replace:true,
            transclude:true,
            require:"^?accordion",
            scope:{
                title:"=expanderTitle"
            },
            template:'<p>'+
                        '<p class="title" ng-click="toggle()">{{title}}</p>'+
                        '<p class="body" ng-show="showMe" ng-transclude></p>'+
                     '</p>',
            link:function(scope,element,attrs,accordionController){
                scope.showMe=false;
                accordionController.addExpander(scope);
                scope.toggle=function (){
                    scope.showMe=!scope.showMe;
                    accordionController.gotOpened(scope);
                }
            }
        }
    });
    appModule.controller("SomeController",function($scope){
        $scope.expanders=[
            {
                title:"Click me to expand",
                text:"Hi everyOne Jp;lkas;dkpoqawjd",
            },
            {
                title:"Click this",
                text:"I am even olasjmdaoliwjdzsl;dm",
            },
            {
                title:"Click me",
                text:"I am Kapsdojpoajsmfpo"
            }
        ];
    })
//    function SomeController($scope){
//        $scope.title="Click me to expand";
//        $scope.text="Hi there folks,I am the cotent";
//    }
</script>
</html>