如何使用AngularJS呈现原始HTML？

Question

我正在创建一个AngularJS单页面应用程序。数据将从以json格式提供的Web服务中获取。

问题在于某些文本元素带有预格式化的html标签。 < p > json输出：< /p >

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

现在我应该如何直接显示这段文本并呈现HTML，以便用户只看到"test"而其余内容作为标记？

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

- membersound

---

这个能帮到你吗？https://dev59.com/iWox5IYBdhLWcg3wLhUA - Baart

Answer 1

你需要在h1标签上添加ng-bind-html="data.text"。

你的HTML代码会变成：

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

文档：ngBindHtml

- MHX

---

听起来很有前途，但是当我使用它时，我不再看到任何输出，只有一个空元素。 - membersound

@membersound 你的JSON似乎存在格式问题。你的属性stule应该使用'而不是"，否则会导致一切都崩溃。但这可能只是一个打字错误。 - Pierre-Alexandre Moller

这只是我这个例子中的一个笔误。 - membersound

我之前缺少了 angular-sanitize 模块，现在可以工作了。 - membersound

Answer 2

更新2：是否可以为您去掉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(type, value)

委托给$sceDelegate.trustAs。因此，返回一个由angular信任的对象，用于在指定的严格的上下文转义上下文中使用（如ng-bind-html、ng-include、任何src属性插值、任何dom事件绑定属性插值，如onclick等）。查看 *$sce以启用严格的上下文转义。

在这里阅读更多：

• https://docs.angularjs.org/api/ng/service/$sce
• AngularJS : Insert HTML into view

- schellingerht

---

能否直接在HTML中解决这个问题？因为我得到了一个json响应，并希望通过<h1 ng-bind-html="data.text"></h1>动态地引用HTML中的元素，而不必从控制器内部调用$sce。 - membersound

我无法控制JSON响应，因此被迫处理预格式化的HTML标记。 - membersound

不可能，因为我需要按照解释标记的方式显示文本。 - membersound

这对我来说是最好的解决方案，只需要使用ng-bind-html。 - Richard Aguirre

Answer 3

尝试使用这个https://docs.angularjs.org/api/ng/directive/ngBind

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>

- RobertRPM

---

他想要打印HTML，而不是一个简单的变量。 - Pierre-Alexandre Moller