Question

我最近用JHipster开始了我的第一个项目并创建了两个实体。其中一个实体类似于博客。该博客的内容属性适用于textarea。在我的blogs.html文件中，我启用了在textarea中使用html-tags，如下所示：

<div ng-bind-html="topic.content"></div>

这没有问题。我能够在我的textarea中定义html-tags，并将它们解释为这样。

但问题始于为新形成的属性设置样式。一个带内联样式的简单div：

<div style="font-size:100px"> Test</div>

被解释为html，但样式被跳过。我也尝试使用ng-style：

 <div ng-style="font-size:100px"> Test</div>`

但这也没有用。如果我的样式可能被覆盖，我也尝试设置!important标志而没有成功。

我提供实际代码有点困难，因为jhipster生成我的实体完全自主。我无法确定某些脚本是否会覆盖我的样式或禁止使用样式标记作为整体。从来没有做过一些可能有助于解决问题的照片：

这是我的textarea，用户在其中输入

这是结果的样子，注意＆＃34;测试＆＃34;文字应该是彩色的：

最后但并非最不重要的是，我尝试提供浏览器解析属性的方式：

感谢您的帮助！

Answer 1

我认为清洁剂正在剥离样式标签......

在控制器中注入$ sce服务，将trustAsHtml函数映射到视图：

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

然后你可以这样做：

<div ng-bind-html="trustAsHtml(topic.content)"></div>

这应该可以解决您的问题，但要注意您的topic.content来自经过验证的来源（不是来自用户输入），或者您可能会注入攻击......