CODEWITHSUNDEEP
angularjsangularjs-directive
Misha Moroshko
Misha Moroshko

Reputation: 171321

AngularJS: How to implement a directive that outputs its HTML?

I'd like to create an example directive that appends its inner HTML to itself. So, this:

<div example>
  <label for="name">Name:</label>
  <input id="name" type="text" ng-model="name">
</div>

should become this:

enter image description here

When inside a directive, the element already has things line class="ng-scope ng-pristine ng-valid" which shouldn't be in the outputted HTML.

How would implement such a directive?

My attempt is here

Upvotes: 1

Views: 58

Answers (1)

Alex
Alex

Reputation: 7919

You probably don't need to transclude or use scope here, just use the compile function to grab the inner html and append it to the node:

.directive('example', function() {
  return {
    compile: function(ele) {
      var innerHtml = ele.html();
      ele.append(document.createTextNode(innerHtml));
    }
  };
});

Demo

Upvotes: 2

Related Questions