Angular sanitize / ng-bind-html not working?
Asked Answered
A

5

50

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.

Amulet answered 6/2, 2013 at 10:38 Comment(3)
could you show what u have tried on jsfiddleCarve
jsfiddle.net/eZhnd/16Amulet
Looks like the angular-sanatize.js file I was using was incorrect, I had taken it form the git repo, but when I took the one that's used on js fiddle it now works as expected.Amulet
A
124
  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()

Artillery answered 22/3, 2013 at 20:39 Comment(3)
Thanks for putting the steps in. So much easier to follow and get figured out.Trill
This should be the accepted answer (with 100+ upvotes why not?!)Commensal
4. Make sure your colleagues haven't snuck in a sneaky item.title = $sce.trustAsHtml(item.title)Kinelski
A
7

My solution to this was to download the js file from here

http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js

I had been using the one I found in the angular git repo,

Amulet answered 7/2, 2013 at 9:17 Comment(0)
J
2

I experienced a similar issue but mine was a bit weird. Only input tags were not rendered while everything else including

<h3></h3>
<em></em> 

did. After several hours i realised that apart from

angular-sanitize.min.js 

I needed to add

textAngular-sanitize.min.js

to my project before the input tags worked. It was really frustrating so I hope this helps anyone in a similar situation

Juback answered 11/1, 2016 at 18:35 Comment(0)
C
1

Encountered this issue when using a directive and the solution was not using "replace" in the code.

`ng-html-bind' was being used on a div in the templateUrl view

appDirectives.directive('helpText', [function () {
return {
    restrict: 'E',
    //replace: true, // With this uncommented it does not work!
    scope: {
        displayText: '='
    },
    templateUrl: '/web/form/helptext',
    link: function (scope) {

    }

};
}]);
Cynara answered 12/12, 2017 at 12:49 Comment(0)
E
0

My solution was the opposite of Seglespaan. It was to use the Bower version of Angular Sanitize.

bower install angular-sanitize

https://github.com/angular/bower-angular-sanitize

Elbring answered 2/11, 2015 at 4:53 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.