Заполнение двойных фигурных скобок в пределах $sce.trustAsHtml

Question

Мне нужно визуализировать строку (item.tabs.review.content), которая анализируется в HTML с использованием $sce.trustAsHtml.

Основная проблема, с которой я столкнулся, заключается в том, что внутри строки есть ссылки на массив в объекте item (item.tabs.review.images).

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

Проблема, с которой я сталкиваюсь, заключается в том, что после отображения HTML в браузере двойные фигурные скобки игнорируются и не заполняются объектом?

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

Добавлен поршень. http://plnkr.co/edit/Jkrx3SxNjWmHPQnKbnFY?p=preview

Answer 1

Я бы предложил создать директиву, которая будет сначала играть со значением, используя $parse, $parse с scope даст значение этой переменной области, предоставленной в атрибуте директивы. А потом убежать html заменить HTML entityк тегам HTML, для этого вы должны использовать unescapeHTML Функция, которую я добавил ответ. Потом использовать $interpolate чтобы получить значение {{}} Интерполированный контент даст вам src, $sce.parseHtml дезинфицировать содержание HTML.

наценка

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

директива

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,'}');
}

Демо Планкр