在 $sce.trustAsHtml 内填充双花括号

Populating Double Curly Braces Within $sce.trustAsHtml

我必须呈现一个字符串 (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}}'>

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

我建议创建指令,首先使用 $parse 来处理值,$parsescope 将给出指令属性中提供的范围变量的值.然后取消转义 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(/&lbrace;/g,'{').replace(/&rbrace;/g,'}');
}

Demo Plunkr