如何在视图中呈现包含HTML的Angular变量？

Question

我有一个包含HTML的数据（例如我有<b>XXXX</b>），我想将其显示为：

XXXX

我希望在视图中显示时将其渲染为粗体。

我该怎么做？

Answer 1

您可以使用ng-bind-html表达您正在寻找的内容。

var app = angular.module('myApp', ['ngSanitize']);

app.controller('MainCtrl', function ($scope) {
    $scope.text = "<b>XXXX</b>";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.min.js"></script>

<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-bind-html="text"></div>
</div>

请注意，您必须在依赖项中包含ngSanitize才能使用它。

在JSFiddle上测试！

Answer 2

在AngularJS中，您可以使用ng-bind-html在视图上呈现html。

它会使您的内容 XXXX 加粗。