Ng-bind-html - using angular -sanitize - throws an error in the console

Question

I am trying to add html to a div as follows:

$scope.thehtml = $sce.trustAsHtml("<b>hello</b>") <div ng-bind-html="thehtml"> </div> 

I see the following error in the console:

 TypeError: undefined is not a function at htmlParser (js/angular/angular-sanitize.js:205:17) at $sanitize (js/angular/angular-sanitize.js:119:5) at Object.ngBindHtmlWatchAction [as fn] (js/angular/angular-sanitize.js:420:15) at h.$get.h.$digest (js/angular/angular.min-125.js:98:396) 

angular -sanitize.js: 205: 17:

 if ( html.indexOf("<!--") === 0 ) { index = html.indexOf("-->"); 

Apparently html is not considered as a string, so the error in indexOf?

I included angular -sanitize.js and added the 'ngSanitize' module to the application.

Answer 1

Please browse plunk . From what I see, your implementation looks great! My plunger is working and I am not getting an exception with the same code. I did not have to add ngSanitize as a module dependency, I just injected $ sce into my controller.

The library versions that I used are as follows:

 https://code.angularjs.org/1.2.28/angular.js https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js 

Try replacing your script links with these versions to see if they are to blame for the files.

Let me know how you deal! Good luck :)

Answer 2

Turn on angular first and then angular-sanitize :

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/xyz/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/xyz/angular-sanitize.js"></script>