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

Pankaj Parkar · Accepted Answer · 2015-09-06T09:16:48.523

2

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(/&lbrace;/g,'{').replace(/&rbrace;/g,'}');
}

Demo Plunkr

edited Sep 06 '15 at 09:16

answered Sep 04 '15 at 20:54

Pankaj Parkar

134,766
23
234
299

did you mean "var html = $interpolate(input)($scope)"? I tried your code and everything is being filtered out. With the code above the HTML is being rendered, but the {{item.tabs.review.images[0].filetype}} is not being populated from the $scope. So far I think that ng-bind is using innerHtml to populate, and not even seeing the {{}}... Thank you for following up – John Spiteri Sep 05 '15 at 22:16
@JohnSpiteri oh..you are rendering image from `ng-repeat`? – Pankaj Parkar Sep 05 '15 at 22:18
I am saving images base64 and when the database object returns - it has all of the material in one object. The use of what I am doing - A user is entering valid HTML into a textarea element, which is being saved as a string (item.tabs.review.content). In that string I am referencing images that are part of that object (item.tabs.review.images). Using ng-bind-html='item.tabs.review.content, I am only getting empty {{}} that are not being populated? – John Spiteri Sep 05 '15 at 22:24
I tried your code and am still getting nothing returned. Going to make a plunkr quickly... Thank you – John Spiteri Sep 05 '15 at 22:52
1

Your plunker works perfectly... Thank you @Pankaj Parkar, nice answer. – John Spiteri Sep 06 '15 at 21:20
@JohnSpiteri glad to help you in that..Thanks :) – Pankaj Parkar Sep 06 '15 at 21:29

Populating Double Curly Braces Within $sce.trustAsHtml

1 Answers1