A sample code was run and an expander undefined error was reported?
<!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>
Like +0
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
走同样的路，发现不同的人生