i am a new bee in AngularJS. I know about the angular-ui accordion. but i dont want to use that. i want to learn the basic of accordion in AngularJS by making a toy accordion by myself. here is the body part of my code.
<body ng-app="MyZippy">
<zippy slide-title="Say Hello To Universe" slide-content="Hello Universe"></zippy>
<zippy slide-title="Say Hello To World" slide-content="Hello World"></zippy>
</body>
and here is the app.js
var app = angular.module('MyZippy', []);
app.directive('zippy',function(){
var linkFn = function(scope,element,attrs){
scope.isHideContent = false;
scope.toggleContent = function(){
scope.isHideContent = !scope.isHideContent;
};
};
return {
restrict :"E",
scope:{
zippytitle:"@slideTitle",
zippycontent:"@slideContent"
},
link : linkFn,
template :
'<div ng-click="toggleContent()" style="border:1px solid #ccc;padding:3px;width:207px"><h3 style="padding:3px;background:#ccc;width:200px;margin:0px;">{{zippytitle}}</h3>'+
'<div ng-show="isHideContent"><p>{{zippycontent}}</p></div></div>'
};
});
How can i get the accordion effect from it? how can i get all zippy directive reference in link function? is compile function help me here? ah.. without JQuery of course you can see output here
Thanks in Advance