通过角度显示html

Question

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

<h1>Some header</h1>

它显示：

＆lt; h1＆gt;一些标题＆lt; / h1＆gt;

但我希望它能渲染html;但如下图所示;它只显示源html

这是我目前的控制人员：

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

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

使用以下html：

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

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

Answer 1

要解码html，您可以使用此技巧：

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

然后申请到您的财产：

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

Answer 2

您必须清理您的html数据/字符串：

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

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

在html中你可以像这样使用：

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;
    }
});

commerce.oldTimings是$ scope变量，具有字符串描述或具有带html标记的字符串，$ scope.businesses.oldTimings是您用于该html的特定控制器的一部分。

见快照：

您可以使用limitHtml过滤器执行相同操作：

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

然后你可以在你的html中添加过滤器：

import java.text.Collator;
import java.util.Arrays;

public class Main {
  public static void main(String args[]) {

    String[] myArray = new String[] { "A", "B", "b" };
    Arrays.sort(myArray, Collator.getInstance());

  System.out.println(Arrays.toString(myArray));

 }

}

希望它对您有用。

Answer 3

请检查此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