Populating Double Curly Braces Within $sce.trustAsHtml

Question

I have to render a string (item.tabs.review.content), that is parsed into HTML using $sce.trustAsHtml.

The main issue I am having is that within the string are references to an array in the item object (item.tabs.review.images).

.material(ng-bind-html='item.tabs.review.content')

The issue that I am having is that once the HTML is rendered in the browser, the double curly braces are being ignored and are not being populated by the object?

<h1>TEsting</h1>
<img ng-src='data{{item.tabs.review.images[0].filetype}};base64{{item.tabs.review.images[0].base64}}'>

Added a plunker. http://plnkr.co/edit/Jkrx3SxNjWmHPQnKbnFY?p=preview

Answer 1

I'd suggest create directive that will play with the value first by using $parse, $parse with a scope will give the value of that scope variable provided in directive attribute. And then unescape the html to replace the html entity's to the html tags, for that you should use unescapeHTML function which I added an answer. Afterwards use $interpolate to get value of {{}} interpolated content will give your src. $sce.parseHtml to sanitize the html content.

Markup

.material(bind-img='item.tabs.review.content')

Directive

angular.module('app').directive('bindImg', function($parse, $interpolate, $sce) {
  return {
    link: function(scope, element, attrs) {
      var parsed = $parse(attrs.bindImg)(scope)
      parsed = unescapeHTML(parsed)
      var html = $interpolate(parsed)(scope)
      element.html($sce.trustAsHtml(html));
    }
  }
})

//unescape html
function unescapeHTML(escapedHTML) {
  return escapedHTML.replace(/{/g,'{').replace(/}/g,'}');
}

Demo Plunkr