javascript - 在 $sce.trustAsHtml 中填充双花括号

Question

我必须渲染一个字符串 (item.tabs.review.content)，它使用 $sce.trustAsHtml 解析为 HTML。

我遇到的主要问题是字符串中引用了项目对象（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}}'>

添加了一个plunker。http://plnkr.co/edit/Jkrx3SxNjWmHPQnKbnFY?p=preview

Answer 1

我建议创建指令，该指令将首先通过 using 使用该值$parse，$parseascope将给出指令属性中提供的该范围变量的值。然后取消转义html以将 html 替换为entityhtml 标签，为此您应该使用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,'}');
}

演示 Plunkr