[AngularJS] newbee trying abstract directive to show hide content which will be injected

[fachhoch]

I am trying to use directives,   this is my first trial with angular,I want 
a directive which has toggle option to show or hide content , I want the 
content to be injected to this directive so that  way I can use this 
directive for any content and this directive takes care of show or hide 
content.

Its more like abstractPanel  where getContent is abstract and  on creating 
instance of abstractPanel I have to provide  contentPanel.  AbstractPanel   
 takes care of show or hide contentPanel.


so the  abstractPanel will be reusable for several contentPanels. I created 
jsfiddle here is the link

http://jsfiddle.net/fachhoch/HB7LU/3820/

myApp.directive('abstractToggleContentPanel', function() {
 return {
            restrict:'E',
            scope:{
                title: '@'
            },
            controller:function($scope){
                $scope.showContent=false;
                $scope.showLess=function(){
                    $scope.showContent=false;
                };
                $scope.showMore=function(){
                    $scope.showContent=true;
                }
            },
            link:function($scope, element, attrs){
            },
            template:' \
     <div> \
        <div ng-show="!showContent"> \
            <button ng-click="showMore()" >Show {{title}}</button> \
         </div> \
        <div ng-show="showContent"> \
            <button ng-click="showLess()" >Hide {{title}}</button> \
            <div  class="content"/> \
        </div >\
        </div> '
      };
})
 .directive('contentPanelOne', function(){

        return {
            restrict:'E',
            scope:{},
            controller:function($scope){
            },
            templateUrl:'<div>Content panel one  text</div>'
        }
    })
 
.directive('contentPanelTwo', function(){

        return {
            restrict:'E',
            scope:{},
            controller:function($scope){
            },
            templateUrl:'<div>Content panel two  text</div>'
        }
    })



;

the template of abstractToggleContentPanel  has div  with class content  so 
when  using my   abstractToggleContentPanel I want to  replace the content 
div with contentPanelOne  or contentPanelTwo

html 


// for content Panel 1
<div>
<abstract-toggle-content-panel title="Content Panel 1 " />
</div>
// for content Panel 2
<div  style="padding-top: 1em">
<abstract-toggle-content-panel title="Content Panel 2 " />
</div> 






-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.