如何使用 AngularJS 渲染原始 html？

Question

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

问题是一些文本元素带有预格式化的 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

尝试使用这个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>

Answer 3

更新 2：是否可以为您删除 html？可以这样做：

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

而你html:

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

查看更多信息：angularjs to output plain text instead of html

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

这是可能的，但不像非html（安全性高）那么容易。

在Angular1.3中你需要如下：

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

在你的控制器中添加：

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

解释：你看到了$sce:

$sce is a service that provides Strict Contextual Escaping services to AngularJS.

trustAs(type, value)

Delegates to $sceDelegate.trustAs. As such, returns an object that is trusted by angular for use in specified strict contextual escaping contexts (such as ng-bind-html, ng-include, any src attribute interpolation, any dom event binding attribute interpolation such as for onclick, etc.) that uses the provided value. See * $sce for enabling strict contextual escaping.

在此处阅读更多内容：

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

如何使用 AngularJS 渲染原始 html？

How to render raw html with AngularJS?

html

javascript

json

angularjs

ng-bind-html