通过 angular 显示 html

Question

我正在尝试显示已编码的 html。但这似乎不起作用。输入是通过：

&lt;h1&gt;Some header&lt;/h1&gt;

它显示：

一些 header

但我想让它渲染 html；但如下笔所示；它只显示来源 html

这是我当前的控制器：

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

myApp.controller('myCtrl', function ($scope, $sce) {
  $scope.trustedHtml = $sce.trustAsHtml('&lt;h1&gt;Some header&lt;/h1&gt;');
});

与以下 html:

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-bind-html="trustedHtml"></div>
</div>

http://codepen.io/cskiwi/pen/PqXdOa

Answer 1

请检查此codepen http://codepen.io/anon/pen/xGmaWR

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-bind-html="trustedHtml"></div>
</div>

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

 myApp.controller('myCtrl', function ($scope) {
  $scope.trustedHtml = '<h1>Some header</h1>';
 });

Angular Docs

Answer 2

要解码html，你可以使用这个技巧：

var encodedHtml = '&lt;h1&gt;Some header&lt;/h1&gt;';
var decodedHtml = angular.element('<div>').html(encodedHtml).text();

然后申请你的属性:

$scope.trustedHtml = $sce.trustAsHtml(decodedHtml);

Answer 3

您将必须清理您的 html data/string :

我之前遇到过同样的问题，然后我为这个问题创建了一个过滤器，您可以使用这个过滤器来清理您的 html 代码：

app.filter("sanitize", ['$sce', function($sce) {
    return function(htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);

在html中你可以这样使用：

<div ng-bind-html="businesses.oldTimings | sanitize"></div>

businesses.oldTimings 是具有字符串描述或带有 html 标签的字符串的 $scope 变量，$scope.businesses.oldTimings 是您正在使用的特定控制器的一部分 html.

见快照：

您可以使用 limitHtml 过滤器来做同样的事情：

app.filter('limitHtml', function() {
    return function(text, limit) {
        var changedString = String(text).replace(/<[^>]+>/gm, '  ');
        var length = changedString.length;
        return changedString.length > limit ? changedString.substr(0, limit - 1) : changedString;
    }
});

然后你可以像这样在你的 html 中添加 bothe 过滤器：

<p class="first-free-para" ng-bind-html="special.description| limitHtml : special.description.length | sanitize">

希望对你有用。

通过 angular 显示 html

Displaying html via angular

html

angularjs

ngsanitize

一些 header