Check out ng-transclude. Basically, add transclude: true to your directive declaration object, and then in the template (you've got an error there putting a template in as templateUrl, btw), you can say, <div ng-transclude></div>, and your wrapped stuff will get shoved in there.
e On Fri, May 23, 2014 at 4:20 PM, <[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. > -- 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.
