AngularJS ng-bind-html 指令

  • 定义和用法

    ng-bind-html 指令是将内容绑定到 HTML 元素的安全方式。
    当让 AngularJS 在应用程序中编写 HTML 时,应检查 HTML 中是否存在危险代码。 通过在应用程序中包含 “angular-sanitize.js” 模块,您可以通过 ngSanitize 函数运行 HTML 代码来实现此目的。
  • 语法

    <element ng-bind-html="expression"></element>
    
    所有HTML元素都支持。
  • 参数

    参数 必需的 描述
    expression 指定要评估的变量或表达式。
  • 示例

    下例演示了将<p>元素的innerHTML绑定到变量myText:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.5.8/angular-sanitize.js"></script>
    </head>
    <body>
       <div ng-app="myApp" ng-controller="myCtrl">
           <p ng-bind-html="myText"></p>
       </div>
       <script>
          var app = angular.module("myApp", ['ngSanitize']);
          app.controller("myCtrl", function($scope) {
              $scope.myText = "我的名字是: <h1>中国</h1>";
          });
       </script>
    </body>
    </html>
    
    尝试一下