How to write a directive which can render some html code with angular directives, and show it as text?

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

I nearly make it work, but failed on the last step: stackoverflow.com/questions/14565835/… — Freewind
– Freewind, Commented Jan 28, 2013 at 15:53
This video gave me some ideas but couldn't make it work, very interesting problem though. Maybe a filter is a better approach? — Bertrand
– Bertrand, Commented Jan 29, 2013 at 12:45

bmleite · Accepted Answer · 2013-01-30 00:41:34Z

4

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...

answered Jan 30, 2013 at 0:41

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

How to write a directive which can render some html code with angular directives, and show it as text?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related