如何从 ngModel 渲染 HTML 标签？答案

【问题标题】：How to render HTML Tags from ngModel?如何从 ngModel 渲染 HTML 标签？
【发布时间】：2015-10-15 12:27:33
【问题描述】：

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

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 标签起作用。

【问题讨论】：

标签： javascript angularjs data-binding

【解决方案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

注意：不要忘记在您的应用中注入 ngSanitize 服务。

【讨论】：

【解决方案2】：

您需要使用ngBindHtml 指令正确评估表达式并将生成的HTML 以安全的方式插入到元素中。为此，您必须在 HTML 中包含对 angular-sanitize.js 的引用，然后在 Angular 模块中注入 ngSanitize。

像这样

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

 <div ng-controller="TabsController">
  <div ng-bind-html="events.test"></div>
 </div>

这是一个完整的工作示例：

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML = 'Hello This is <b>BOLD<b/>';
  }]);
})(window.angular);

<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
     <p ng-bind-html="myHTML"></p>
  </div>
</body>

详情请参考官方 Angular 文档： https://docs.angularjs.org/api/ng/directive/ngBindHtml

【讨论】：

【解决方案3】：

如果你想在页面中插入 HTML，你不应该这样做。这个任务有sanitize。例如在您的控制器中：

$scope.trustedHtml = "<b>Hello World</b>"

在你的 html 中：

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

如果在插入前使用用户给定的文本，请务必检查 html。

另外不要忘记在创建控制器时添加 ngSanitize 作为依赖项

【讨论】：

【解决方案4】：

如果您想将自定义 HTML 嵌入到您的 DOM 树中，使用嵌入会更容易。

angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
    $scope.overwrite = false;
    $scope.origin = 'parent controller';
})
.directive('myDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'my-directive.html',
        scope: {},
        transclude: true,
        link: function (scope) {
            scope.overwrite = !!scope.origin;
            scope.origin = 'link function';
        }
    };
});

<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <my-directive>
            <p>HTML template</p>
            <p>Scope from {{origin}}</p>
            <p>Overwritten? {{overwrite}}</p>
        </my-directive>
    </div>
    
<script type="text/ng-template" id="my-directive.html">
    <ng-transclude></ng-transclude>
    <hr />
    <p>Directive template</p>
    <p>Scope from {{origin}}</p>
    <p>Overwritten? {{overwrite}}</p>
</script>
</div>

【讨论】：

比使用ng-bind-html 指令更容易！？
为了编写代码的简单性，ng-bind-html 更快更容易理解。这可能只是我个人的喜好，我想在我的模板中管理所有 html 块而不是在我的控制器中。