html - angular経由でhtmlを表示する

Question

エンコードされたhtmlを表示しようとしています。しかし、これはうまくいかないようです。入力は次のとおりです。

<h1>Some header</h1>

そしてそれは示しています：

<h1>一部のヘッダー</h1>

しかし、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 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>

business.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 に追加できます。

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

それがあなたのために働くことを願っています。

Answer 3

このコードペンをチェックしてください 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 ドキュメント