Thank you, it worked with ng-transclude, updated fiddle http://jsfiddle.net/fachhoch/HB7LU/3822/
Next my goal is to load the contentpanel lazy. So initially I will not include any child directive , and once showMore() func is called for first time I want to replace the content div with html of another directive. Please guide me how I can achieve this. On Friday, May 23, 2014 7:20:56 PM UTC-4, [email protected] wrote: > > 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
