Question

我正在使用以下版本的Angularjs，并尝试将包含html标签的名为Description的属性与我的模板绑定。我尝试使用
{{Description | unsafe}}-将html呈现为字符串
ng-bind-html-unsafe-没有呈现
ng-bind-html-没有呈现

文件：

<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular.min.js"></script>
<script src="https://storage.googleapis.com/vendortoolkit/Scripts/angular-route.js"></script>

如何将html字符串呈现为html？

Answer 1

使用$sce服务。将$sce注入控制器，然后使用trustAsHtml方法。在控制器中，将代码添加为：

$scope.desc = $sce.trustAsHtml($scope.Description);

$scope.Description是包含html标签的字符串

然后，用ng-bind-html绑定到模板：

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

Answer 2

要使ng-bind-html正常工作，您需要包括angular-sanitize库和ngSanitize作为依赖项注入。在这里分享一个例子。希望这会有所帮助。

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

    <p ng-bind-html="myText"></p>

</div>

ng-bind-html和不安全无法正常工作

2 个答案: