How to pass HTML to angular directive?

Question

I am trying to create an angular directive with a template, but I also don't want to lose the HTML inside of the div. For example, here is how I would like to call my directive from HTML:

<div my-dir>
  <div class="contents-i-want-to-keep"></div>
</div>

Then, there is my directive:

app.directive('myDir', [ '$compile', function($compile) {
return {
    restrict: 'E',
    link: function(scope, iElement, iAttrs){
        // assigning things from iAttrs to scope goes here
    },
    scope: '@',
    replace: false,
    templateUrl: 'myDir.html'
};
}]);

and then there is myDir.html, where I define a new element:

<div class="example" style="background: blue; height: 30px; width: 30px"></div>

Even when I set replace to false, I lose the inner contents-i-want-to-keep div - my understanding of the angular docs was that this would be appended after my template. Is there some way to preserve this (possibly through my linking function?) so that the result will be

<div class="example" style="background: blue; height: 30px; width: 30px">
     <div class="contents-i-want-to-keep"></div>
</div>

Thanks!

you have to do translude:true and use ng-transclude to keep inner div — Ajay Singh Beniwal
– Ajay Singh Beniwal, Commented May 22, 2013 at 17:11

Édouard Lopez · Accepted Answer · 2016-11-20 19:37:28Z

51

You'll need to use ng-transclude, add transclude: true in your directive options, and add ng-transclude to your template:

<div class="example" style="…" ng-transclude></div>`

This plunkr has an example on how to use ng-transclude with a template, to keep the original dom element.

http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf

edited Nov 20, 2016 at 19:37

Édouard Lopez

43.8k30 gold badges134 silver badges190 bronze badges

answered May 22, 2013 at 17:11

Alan

47k20 gold badges118 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MarzSocks Over a year ago

What from what version of Angular is this compatible with?

Alan Over a year ago

@MarzSocks I just verified it's compatible with the latest 1.3.4. Feel free to try the plunkr with the latest angular version and see.

DarthVanger Over a year ago

Angular directive documentation says that transclude does something strange with scope: "transclude makes the contents of a directive with this option have access to the scope outside of the directive rather than inside." (from docs.angularjs.org/guide/directive). So, can setting transclude: true have side effects, besides just letting me to use directive's inner html?

zygimantus Over a year ago

Does this work in a template? I am getting this error: Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template!

Collectives™ on Stack Overflow

How to pass HTML to angular directive?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related