如何使用AngularJS渲染原始html？

问题描述

我正在创建一个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>

Update2：是否可以为您删除HTML？ 可以这样做：

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

你的HTML：

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

查看更多信息：

更新：你真的需要你的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事件绑定属性插值，例如forclick等。 ）使用提供的值。 请参阅* $ sce以启用严格的上下文转义。

在这里阅读更多：

• $ sce

尝试使用此

<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>