conditionally trust html from angular scope variable

Question

I have an html snippet as follows:

<span id="notification"> {{ message }} </span>

In order to bind to html, I need to do the following:

<span id="notification" ng-bind-html="message"></span>

Ideally, I want to be able to set a flag to trust $scope.message as html... So my options are to use an ng-if with duplicate code, but this is not ideal because I would like this to the same id for both message elements. I was also looking into taking advantage of ng-attr, but don't believe this will work.

Is there a way I can conditionally add "ng-bind-html" and "ng-bind", so evaluate a flag and remove the undesired attribute? I am new to angularjs.

Answer 1

You could make use of the $sanitize service and a function to either return just your message or return your message wrapped in $sanitize . Then you could just use ng-bind

An example

<span id="notification" ng-bind="notificationCtrl.getMessage(message, true)"></span>

In your controller

this.getMessage = function(msg, sanitize) {
   if (sanitize) return $sanitize(msg)
   return msg
}