javascript - 保存(转义？)html 并在 json 对象中使用它

Question

我正在尝试将 div 对象的内部保存为 json 对象中的一些 html，保存它，然后将其作为 json 接收回来，并让 html 能够在放置在 div 中时用作普通 html。

这是我的尝试

$scope.contentHere = [
{
  'size' : '',
  'title' : 'Utility Alerts',
  'content' : '<div>test 1</div>',
  'help' : 'Help Text Here',
  'launch' :  true,
  'share' : true,
  'mobile' :  true

},
{
  'size' : 'w3',
  'title' : 'Graph',
  'content' : '&lt;nvd3-stacked-area-chart data=&quot;exampleData&quot; id=&quot;exampleId&quot; showXAxis=&quot;true&quot; showYAxis=&quot;true&quot; showControls=&quot;true&quot; width=&quot;700&quot; height=&quot;200&quot;&gt; &lt;svg&gt;&lt;/svg&gt; &lt;/nvd3-stacked-area-chart&gt;',
  'help' : 'Help Text Here',
  'launch' :  true,
  'share' : true,
  'mobile' :  true

}];

我正常尝试了一个，一个完全转义了，两者似乎都在页面上呈现为普通文本。我让它们重复并尝试像这样显示 html -

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" >
            <div class="handle"><h5 ng-style="{ 'color' : themeHere.h1 }>{{widget.title}}</h5></div>
                {{widget.content}}

    </div>

非常感谢任何帮助!感谢阅读。

Answer 1

你必须告诉 Angular 像这样将内容绑定(bind)为 HTML:

<div class="item gs-w" ng-class="widget.size" ng-repeat="widget in contentHere" >
    <div class="handle"><h5 ng-style="{ 'color' : themeHere.h1 }>{{widget.title}}</h5></div>
    <div ng-bind-html="widget.content"></div>
</div>

但是，从 1.2 开始，Angular 附带了 $sce 启用，这意味着您必须明确地告诉 Angular 您信任该 HTML，如下所示:

// You will have to inject $sce in your controller.
$scope.contentHere = $scope.contentHere.map(function(entry){
    entry.content = $sce.trustAsHtml(entry.content);
    return entry;
});

此外，不确定这是否只是复制粘贴问题，但在数组中的第二个对象中，内容以 HTML 实体编码，您将需要正确的、未编码的 HTML。