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

我建议使用$parse首先使用值播放的create指令，使用$parse scope将赋予指令属性中提供的范围变量的值。然后unescape 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

在$ sce.trustAsHtml中填充双重大括号

1 个答案: