Angular sanitize / ng-bind-html not working?

angularjs ng-bind-html ngsanitize
Tim Webster picture Tim Webster · Feb 6, 2013 · Viewed 53.6k times · Source

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 looks like sanitise isn't working,

I read that this needs to be added to the app dependencies but am not sure where to do so.

I've just been working through the tut on the angular site so only have a very basic controller set up at the minute.

Answer

Dan picture Dan · Mar 22, 2013

  1. You need to include the angular-sanitize.js http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js

  2. Add 'ngSanitize' to you module dependencies

    var myApp = angular.module('myApp', ['ngSanitize']);

  3. Don't use the {{}} in the attribute

    <h1 ng-bind-html="item.title"></h1>

  4. Don't use $sce.trustAsHtml()

Related questions

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. <div ng-repeat="question in questions"> <p ng-bind-html="$…

Read More
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 …

Read More
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: <input ng-model="emer.phone" ui-mask="{{'(999) 999-9999'}}" type="text"/> Question: But now how can I apply the same …

Read More