ng-bind-html

`ng-bind-html` 是 AngularJS 框架中的一个指令（directive），它用于将一个表达式的值绑定到 HTML 元素的 innerHTML 属性上，并且可以解析其中的 HTML 标记。如果只是使用 `{{}}` 语法进行数据绑定，那么绑定的值会被当做纯文本显示在页面上，而 `ng-bind-html` 可以让绑定的值被解析为 HTML 标记并渲染出来。需要注意的是，为了防止 XSS 攻击，`ng-bind-html` 要求绑定的值必须是由 `$sce.trustAsHtml()` 方法进行过信任处理的。
在 AngularJS 2+ 版本中，`ng-bind-html` 被废弃，可以使用 `innerHTML` 属性或者 `DomSanitizer` 服务来实现类似的功能。

相关问题

angularjs 1.6.9 ng-bind ng-bind-html

`ng-bind` 和 `ng-bind-html` 都是 AngularJS 提供的指令，用于将数据绑定到 HTML 元素中。

`ng-bind` 可以将表达式中的数据绑定到元素的文本内容中，例如：

<p ng-bind="message"></p>

当 `$scope.message` 的值发生变化时，`<p>` 元素的内容会自动更新。

`ng-bind-html` 与 `ng-bind` 类似，但是它可以将 HTML 代码作为字符串绑定到元素中，并且会对 HTML 代码进行安全过滤，避免 XSS 攻击，例如：

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

需要注意的是，使用 `ng-bind-html` 必须引入 `ngSanitize` 模块，例如：

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

ng-bind-html 和 ng-model同时使用

可以同时使用 `ng-bind-html` 和 `ng-model`，但要注意以下几点：

1. `ng-model` 绑定的是表单元素的值，例如 `input`、`select`、`textarea` 等，而 `ng-bind-html` 绑定的是 HTML 内容。
2. `ng-bind-html` 必须与 `$sce.trustAsHtml` 方法一起使用，以确保 HTML 内容被正确解析和渲染。例如：

   <div ng-bind-html="$ctrl.htmlContent"></div>

   angular.module('myApp', []).controller('myCtrl', function($sce) {
     this.htmlContent = $sce.trustAsHtml('<p>Hello, world!</p>');
   });

3. 如果需要将表单元素的值与 HTML 内容绑定在一起，可以使用自定义指令。例如：

   <div my-directive ng-model="$ctrl.htmlContent"></div>

   angular.module('myApp', []).directive('myDirective', function($sce) {
     return {
       restrict: 'A',
       require: 'ngModel',
       link: function(scope, element, attrs, ngModel) {
         ngModel.$formatters.push(function(value) {
           return $sce.trustAsHtml(value);
         });
         ngModel.$parsers.push(function(value) {
           return value ? value.toString() : '';
         });
       }
     };
   });

这里的自定义指令将 ng-model 绑定的值转换为 HTML 内容，并将 HTML 内容还原为字符串。这样就可以同时使用 `ng-bind-html` 和 `ng-model` 了。