javascript - 如何从 ngModel 渲染 HTML 标签？

Question

我使用 AngularJS 将 JS 变量绑定(bind)到我的 HTML 内容，它工作正常。

JS

var app = angular.module("Tabs", [])
  .controller("TabsController", ['$scope', function($scope){
    $scope.events = my_JS_object;
  })

HTML

<div>{{events.test}}</div>

只要my_JS_object.test就有效是一个简单的字符串，例如 "Hello World" ，但是一旦我尝试将 HTML 标记放在那里，例如 Hello <b>World</b>它不将标签用作 HTML 元素，而是用作简单文本。这是有道理的，只是我不知道如何使 HTML 标签起作用。

Answer 1

如 Angular 文档所述，您可以使用内置的 ng-bind-html 指令来评估模型字符串并将生成的 HTML 插入到元素中。

例子: 如果你有像这样的模型值:

$scope.myHTML =
 'I am an <code>HTML</code>string with ' +
 '<a href="#">links!</a> and other <em>stuff</em>';

像这样使用 ng-bind-html:

<p ng-bind-html="myHTML"></p>

有关详细信息，请访问:https://docs.angularjs.org/api/ng/directive/ngBindHtml

注意:不要忘记在您的应用中注入(inject) ngSanitize 服务。