Questions tagged [ng-bind-html]

ngBindHtml creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way.

ngBindHtml creates a binding that will innerHTML the result of evaluating the expression into the current element in a secure way. By default, the innerHTML-ed content will be sanitized using the $sanitize service. To utilize this functionality, ensure that $sanitize is available, for example, by including ngSanitize in your module's dependencies (not in core Angular). In order to use ngSanitize in your module's dependencies, you need to include "angular-sanitize.js" in your application.

You may also bypass sanitization for values you know are safe. To do so, bind to an explicitly trusted value via $sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE).

Note: If a $sanitize service is unavailable and the bound value isn't explicitly trusted, you will have an exception (instead of an exploit.)

Usage
as attribute:

<ANY
  ng-bind-html="">
...
</ANY>

Example

<div ng-controller="ExampleController">
 <p ng-bind-html="myHTML"></p>
</div>

Resources

242 questions
50
votes
5 answers

Angular sanitize / ng-bind-html not working?

I've got a repeater set up and can get data to display as long as there is no html within it. I've included angular-sanitize.js and have tried using ng-bind-html But nothing is displayed within the span, only within the ng-bind-html attribute. So it…
Tim Webster
  • 9,158
  • 8
  • 27
  • 30
34
votes
2 answers

Angular JS shows HTML within the tag

I am trying to insert HTML inside template using ng-bind-html-unsafe attribute. But for some reason its not working. My code:
Niraj Chauhan
  • 7,677
  • 12
  • 46
  • 78
23
votes
2 answers

Difference between ngBind, ngBindHtm & ngBindTemplate in Angular JS

I'm new to Angular JS. Can any one of you guys explain me the difference between ngBind,ngBindHtm & ngBindTemplate in Angular JS with an example?
Syed
  • 2,471
  • 10
  • 49
  • 89
22
votes
3 answers

insert an iframe into page dynamically in AngularJS

I am trying to dynamically insert an iframe into a page with Angular 1.2. Here is the code: html:
js: $http({method: 'GET', url: url}). success(function(data,…
user2929613
  • 405
  • 1
  • 5
  • 14
19
votes
3 answers

AngularJS data bind in ng-bind-html?

Is it possible to bind data of scope variable to a html that is about to bind as ng-bind-html? ie, I have a html ="
{{caption}}
"; and my angular template look like,
the value of scope variable caption is…
Saidh
  • 1,131
  • 1
  • 12
  • 21
18
votes
1 answer

How to bind html into Angular 2.0

In angular 1 binding works like ng-bind-html="htmlValue" How to bind html in Angular 2.0
navin saini
  • 181
  • 1
  • 1
  • 4
15
votes
3 answers

How to render raw html with AngularJS?

I'm creating an AngularJS single page application. The data will be fetched from a webservice in json-format. The problem is that some text elements come with preformatted html tags json output: { "text": "

membersound
  • 81,582
  • 193
  • 585
  • 1,120
14
votes
2 answers

Why is ng-bind-html not displaying anything?

I am displaying a string that has HTML code in it:
put it displays the HTML code instead of interpreting the elements: When I use ng-bind and ng-bind-unsafe, it shows…
Edward Tanguay
  • 189,012
  • 314
  • 712
  • 1,047
14
votes
2 answers

AngularJS using $sce.trustAsHtml with ng-repeat

I'm trying to use $sce.trustAsHtml() with a property of an object in ng-repeat. The result is that the HTML is totally blank. The HTML outputs correctly using ngSanitize though.
ZoM
  • 506
  • 1
  • 6
  • 15
14
votes
3 answers

ng-bind-html doesnt work for Input tags

I am trying to store a HTML inside a scope variable and then use it in template view. When I was reading how to do this in angular, I came across ng-bind-html. In that I've noticed that when I bind html tags with , , etc.. it works. But I…
Neel
  • 9,352
  • 23
  • 87
  • 128
13
votes
5 answers

AngularJS and AngularUI: mask or format a phone number when binding

I am using AngularUI to format or "masking" a phone number input, and it works fine with a ng-model: Question: But now how can I apply the same mask in the same way using…
lito
  • 3,105
  • 11
  • 43
  • 71
10
votes
4 answers

Angularjs ng-bind-html-unsafe replacement

I used to be able to use ng-bind-html-unsafe to output unsanitized code (because sanitization happens serverside). But now that option is gone? I know I can use $sce.trustAsHtml but adding that to the JavaScript all over the place is a huge pain…
Harry
  • 52,711
  • 71
  • 177
  • 261
8
votes
2 answers

How to watch for ng-model created with ng-bind-html

I need some help with an ng-model created with ng-bind-html. I have a JSON file in the server in which I have some html and some inputs like this: *.json { "test": { "1": { "question":"1. something:", …
carloscarcamo
  • 331
  • 1
  • 7
  • 12
7
votes
1 answer

IFrame Not Being Rendered In ng-bind-html

I have a datasource that is used to render blog articles on a page. One of the entries contains an IFRAME. I see the IFRAME being returned in the datasource but it is never rendered to the page in the ng-bind-html. This is my code:
eat-sleep-code
  • 4,753
  • 13
  • 52
  • 98
6
votes
4 answers

AngularJs Return HTML from Controller

I try to return some HTML code from my AngularJs controller to the html data. This is path of my html :
{{chooseHtmlElement()}}">
And this is path of my AngularJs Controller: $scope.chooseHtmlElement= function () { …
ANEDev
  • 111
  • 1
  • 6
1
2 3
16 17