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

Question

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

you would need html from $compile, but not sure how to print it... given that $scope is not available during compile time — harishr
– harishr, Commented Oct 6, 2014 at 11:16

Alex · Accepted Answer · 2014-10-06 11:50:18Z

2

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

answered Oct 6, 2014 at 11:50

Alex

7,9893 gold badges48 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related