Question

我正在尝试从视图中的数据中显示html标记。我有一个数据level是$scope.level="<b>i should be bold</b>"，当数据在模板中给出时，如下所示应尊重html标签以及

<div ng-controller="MyCtrl" >
{{level}}
</div>

它应该是粗体而不使用

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
<b>{{level}}</b>
</div>

但是到目前为止我已经尝试过了，我无法实现它。它也在视图中显示标记。这个问题在JSFiddle Here中有说明。

无论如何都要实现它。或者我完全错了吗？

Answer 1

您可以使用 ngBindHtml 指令来计算表达式，并将生成的HTML插入到元素中。别忘了包含 ngSanitize 指令。

https://docs.angularjs.org/api/ng/directive/ngBindHtml

示例：

app.js

angular.module('app', ['ngSanitize'])
.controller('Controller', function($scope) {
  $scope.data = '<b>my text</b>'
});

的index.html

<div ng-controller="Controller">
 <p ng-bind-html="data"></p>
</div>

Answer 2

您可以使用ng-bind-html-unsafe：

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
    <div ng-bind-html-unsafe="level"></div>
</div>

不安全，因为通常不应在控制器内修改DOM。

Answer 3

为什么不能将<b>标记移动到标记然后只插入'level'的值？

Answer 4

您可以使用ng-bind-html指令完成此操作：

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2">
  <span ng-bind-html="level"></span>
</div>