CODEWITHSUNDEEP
angularjsescaping
Ariel Weinberger
Ariel Weinberger

Reputation: 2301

Get raw AngularJS "innerHTML" as it appears in the editor?

I am working on some sort of documentation website and I want to have an Angular component side by side with its code, as it is shown in the editor. So it's ready to be copy pasted.

I tried to get the element's innerHTML but what I get is not the raw code. Is that possible? I want to avoid having to duplicate my code (once to display it, and the second time to show it in a <xmp> tag for another developer to copy-paste).

So basically I'm looking for a solution that always reflects the certain element's raw code as it appears in the editor.

Any ideas?

Upvotes: 1

Views: 226

Answers (1)

Ariel Weinberger
Ariel Weinberger

Reputation: 2301

My colleague helped me solve this with a nice directive.

http://codepen.io/rogierpennink/pen/dNpwPa?editors=1111

.directive('htmlExtract', function() {

  return {
    restrict: 'EA',
    scope: {
      htmlExtractTarget: '='
    },
    link: {
      'pre': function(scope, element) {
        document.getElementById(scope.htmlExtractTarget).innerText = element[0].innerHTML;      
    }
    }
  };

});

Upvotes: 1

Related Questions