如何使用AngularJS渲染原始html？

Question

我正在创建一个AngularJS单页面应用程序.数据将从json-format中的Web服务获取.

问题是一些文本元素带有预先格式化的html标签

json输出:

{
   "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}

现在我如何显示此文本并直接呈现html,以便只向用户显示"test",其余用作标记？

<h1>{{data.text}}</h1>

Answer 1

您需要添加ng-bind-html="data.text"到您的h1标签.

你的HTML看起来像:

<h1 ng-bind-html="data.text"></h1>

文档:ngBindHtml

Answer 2

Update2：是否可以为您剥离html？可以这样做：

angular.module('myApp.filters', []).
   filter('htmlToPlaintext', function() {
      return function(text) {
         return String(text).replace(/<[^>]+>/gm, '');
      };
   }
);

而你的HTML：

<div>{{myText | htmlToPlaintext}}</div>

查看更多信息：angularjs输出纯文本而不是html

更新：您真的需要json中的html吗？最好将HTML存储在视图中并从json获取数据。分离效果好，易于使用。

这是可能的，但没有非HTML（安全性高）那么简单。

在Angular 1.3中，您需要执行以下操作：

<div ng-bind-html="htmlBind"></div>

在您的控制器中添加以下内容：

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');

说明：您看到$ sce：

$ sce是一项为AngularJS提供严格的上下文转义服务的服务。

trustAs（类型，值）

委托给$ sceDelegate.trustAs。这样，将返回一个由angular信任的对象，以用于指定的严格上下文转义上下文中（例如ng-bind-html，ng-include，任何src属性插值，任何dom事件绑定属性插值，例如onclick等）。 ）使用提供的值。请参阅* $ sce以启用严格的上下文转义。

在这里阅读更多：

• https://docs.angularjs.org/api/ng/service/ $ sce
• AngularJS：将HTML插入视图