angularjsng-bind-htmlangularjs-3rd-party

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

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.

Solution

  • 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.