How to pass HTML to angular directive?
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
Nicole Stein
Updated on November 21, 2020Comments
-
Nicole Stein over 3 years
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!
-
MarzSocks over 9 yearsWhat from what version of Angular is this compatible with?
-
Alan over 9 years@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 almost 8 yearsAngular directive documentation says that
transclude
does something strange withscope
: "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 settingtransclude: true
have side effects, besides just letting me to use directive's inner html? -
zygimantus about 7 yearsDoes this work in a template? I am getting this error:
Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template!