javascript - 使用 ng-bind-html 在页面上显示 html 标签

Question

请看下面给出的代码:

    <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 = "My name is: <h1>John Doe</h1>";
        });
    </script>

输出是:我的名字是: 李四

如何按原样显示文本。例如:My Name is : <h1>John Doe</h1>我想在页面上显示 HTML 标记。

Answer 1

请使用angularjs的$sce

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope, $sce) {
  $scope.myText = $sce.trustAsHtml("My name is: <h1>John Doe</h1>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyController'>
  <p ng-bind-html="myText"></p>
</div>

引用:

1. How to use $sce