CODEWITHSUNDEEP
angularjsangularjs-directive
user1679941
user1679941

Reputation:

How can I create a directive that contains other directives?

I have created some new directives like this:

<admin-retrieve-button></admin-retrieve-button>
<admin-new-button></admin-new-button>
<admin-save-button></admin-save-button>
<admin-reset-button></admin-reset-button>

Is there a way I can create another directive that combines all of these?

Upvotes: 0

Views: 37

Answers (2)

harishr
harishr

Reputation: 18065

you can use ng-transclude for that

app.directive("adminButtonGroup", function(){
   return {
     restrict: 'E'
     transclude: true,
      template: '<div class="btn-group"><div ng-transclude=""></div></div>'
    }
 });

OR if you do not want to transclude and have fixed set of buttons then

  app.directive("adminButtonGroup", function(){
   return {
     restrict: 'E';
      template: '<admin-retrieve-button></admin-retrieve-button>' +
                  '<admin-new-button></admin-new-button>' +
                  '<admin-save-button></admin-save-button>' +
                  '<admin-reset-button></admin-reset-button';
    }
 });

also you can use require, if your child button wants to speak with parent button.

Upvotes: 1

Adam
Adam

Reputation: 2225

Yes.

Create a template that contains theses tags, which is then used in your new directive by setting the templateUrl property to the path to the template file.

Upvotes: 0

Related Questions