ng-bind-html vs bind-html-compile?

Question

I want to know the difference between ng-bind-html and bind-html-compile directives. For example I gave

<p style='color:red'>test<p> 

to ng-bind-html, this strips out the style where as bind-html-compile does not. May I know when each directive should be used. Thanks.

Answer 1

bind-html-compile is not a standard Angular directive, it comes with the module https://github.com/incuna/angular-bind-html-compile and it is used to compile binded data.To make it simple, it is equivalent to write html in your source code: it will be re-evaluated and if other directives are found, they will work as expected.

ng-bind-html is a standard directive (bundled with Angular itself) and just output html strings without compiling it.

for example, if you controller has a variable with plain html, like in:

$scope.dataToDisplay = '<h1><strong>Title</strong></h1>';

Then you can go with ng-bind-html.

If you need to inject variables that contain html with other directives, such as:

$scope.dataToDisplay = '<h1 ng-show="showIfOtherVariable"><strong>Title</strong></h1>';

then you need to aforementioned module.