How to let angularjs not to escape my content

28,460 views
Skip to first unread message

Freewind

unread,
Apr 1, 2012, 10:58:26 AM4/1/12
to ang...@googlegroups.com
<div ng-repeat="p in paragraphs">
<div>{{p.content}}</div>
</div>

The `p.content` contains some html tags, something like: `Hello, <strong>angularjs</strong>`

The final html will be: 

<div ng-repeat="p in paragraphs">
<div>Hello, &lt;strong&rt;angularjs&lt;/strong&rt;</div>
</div>

But I hope it to be:

<div ng-repeat="p in paragraphs">
<div>Hello, <strong>angularjs</strong></div>
</div>

andyt...@gmail.com

unread,
Apr 1, 2012, 12:12:43 PM4/1/12
to ang...@googlegroups.com
Try this:
<div ng-repeat="p in paragraphs" ng-bind-html="content"></div>

andyt...@gmail.com

unread,
Apr 1, 2012, 12:13:22 PM4/1/12
to ang...@googlegroups.com
Sorry, I meant:
<div ng-repeat="p in paragraphs" ng-bind-html="p.content"></div>

I need to start proofreading my posts, haha.

Andy

Peter Bacon Darwin

unread,
Apr 1, 2012, 12:34:36 PM4/1/12
to ang...@googlegroups.com
And if you are really brave you can try: ng-bind-html-unsafe

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/eAi9TLL6DQoJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.

Freewind

unread,
Apr 1, 2012, 10:03:05 PM4/1/12
to ang...@googlegroups.com
Thanks, it works~

Freewind

unread,
Apr 3, 2012, 6:24:49 AM4/3/12
to ang...@googlegroups.com
I found it not convenient that we have to provide a html tag to use `ng-bind-html`.

Consider this example:

    <div> The markdown is {{markdown}}, and the final effect is {{html}} </div>

I have non-escaping can work with `{{}}` syntax. Is it possible?


On Monday, April 2, 2012 12:13:22 AM UTC+8, andyt...@gmail.com wrote:

Peter Bacon Darwin

unread,
Apr 3, 2012, 6:34:15 AM4/3/12
to ang...@googlegroups.com

At first I thought this was rather restrictive and in fact earlier versions of angular had an html filter but actually it doesn't make sense to me to have free html in the middle of a piece of text and in every case I can think of I would want to wrap it in a span or a div.

...from my mobile.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/S9euO7SAZeoJ.

andyt...@gmail.com

unread,
Apr 3, 2012, 7:11:08 AM4/3/12
to ang...@googlegroups.com
Freewind, you could just do

<div>The markdown is {{markdown}}, and the final effect is <span ng-bind-html="html"></span></div>

Misko Hevery

unread,
Apr 3, 2012, 12:57:58 PM4/3/12
to ang...@googlegroups.com
The old version of angular converted 
this:
 <div> The markdown is {{markdown}}, and the final effect is {{html}} </div>

to:
 <div> The markdown is <span ng-bind="markdown"></span>, and the final effect is <span ng-bind-html="markdown"></span> </div>

But the extra span would cause havoc with the way CSS would work. So the new angular dose not create any new spans, which is better. But it also means that there is no place to call innerHTML as there is no dom element. So you have to manually create the element.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/W77h2Kt-ydEJ.

Peter Bacon Darwin

unread,
Apr 3, 2012, 2:20:40 PM4/3/12
to ang...@googlegroups.com
So does the new version take the whole of the text element (i.e. "The markdown is {{markdown}}, and the final effect is {{html}}") and convert it into one template that is attached to the enclosing div?

Misko Hevery

unread,
Apr 3, 2012, 2:46:34 PM4/3/12
to ang...@googlegroups.com
correct.

Freewind

unread,
Apr 3, 2012, 10:16:28 PM4/3/12
to ang...@googlegroups.com
A filter `raw` would be great:

 <div> The markdown is {{markdown}}, and the final effect is {{html | raw }} </div>

Will it possible?
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Misko Hevery

unread,
Apr 4, 2012, 2:01:24 PM4/4/12
to ang...@googlegroups.com
Sorry, not possible for several reasons:
  •  there is no wrapping element to do innerHTML on
  • The interpolate logic would have to special case the HTML
  • The binding logic would have to special case HTML and do .innerHTML in some cases and .text in other. This would create complexity and slow down the rendering.
Why is this so hard?

 <div> The markdown is {{markdown}}, and the final effect is <span ng-bind-html="html"></span> </div>


To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/DAiuQaiCTycJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Not a fan

unread,
Jul 21, 2014, 4:35:56 PM7/21/14
to ang...@googlegroups.com, mi...@hevery.com
This is now broken.  Doesn't work with <div> / <span> as of 7/21/2014.

ng-bind-html is ignored.  ng-bind-html-unsafe is ignored.

Angular outputs escaped strings from the model.

$sce doesn't work.

in-place javascript functions don't work within the tags.  i.e. " {{decodeURIComponent(model.property)}} "
Reply all
Reply to author
Forward
0 new messages