Question

I think some sample code can explain my purpose.

Some html code with angular:

<div ng-init="buttons=['add','edit','delete']">
  <div show-result-as-text>
    <button ng-repeat="button in buttons">{{button}}</button>
  </div>
</div>

You can see there is a custom directive “show-result-as-text” which I want to define. It should render the inner html code with angular directives, then show them as text.

The final html should be:

<div ng-init="buttons=['add','edit','delete']">
  <div show-result-as-text>
    &lt;button&gt;add&lt;/button&gt;
    &lt;button&gt;edit&lt;/button&gt;
    &lt;button&gt;delete&lt;/button&gt;
  </div>
</div>

And when the buttons value changes, the escaped html should also be changed.

I’ve tried to write one myself, but failed after 2 hours of work.

UPDATE

A live demo: http://plnkr.co/edit/fpqeTJefd6ZwVFEbB1cw

Answer 1

The closest thing I could think of is exemplified here: http://jsfiddle.net/bmleite/5tRzM/

Basically it consists in hiding the src element and append a new element that will contain the outerHTML of each src child.

Note: I don’t like the solution but it works, so I decided to share it…