4

angularjsでデータをhtmlとして表示したい。ここに私のコードの一部があります:

<div class="panel-body" ng-controller="hosgeldinizController">
    <div id="divHosgeldiniz" name="hosgeldinizMessages" ng-repeat="hosgeldinizMessage in hosgeldinizMessages">

        <div>
            <span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik">{{hosgeldinizMessage.M_Icerik}} </span>
        </div>            
    </div>
</div>

ただし、通常のテキストと同じように表示される html として表示されませんが、hosgeldinizMessage.M_Icerik には html 要素が含まれています。html として表示するにはどうすればよいですか?

4

5 に答える 5

8

モジュールの依存関係としてngSanitizeを取得します

    var app = angular.module("dene",['ngSanitize']);
    app.controller("deneCtrl",function(){
       this.selam = "<p>Merhaba <strong>Angular</strong></p>";
    });

ビューでng-bind-htmlを使用します

<div ng-controller="deneCtrl as dene">
<span ng-bind-html = " dene.selam "> </span>
</div>

ただし、関連するバージョンを必ず含めてください

のように

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.min.js"></script>

または、ローカルで使用する場合は、 https://code.angularjs.org/のコピーをダウンロードします

注意点

実行中のAngularJSバージョンと同じバージョンのngSanitizeがあることを確認してください。

まあ....何らかの理由でそれらを混同した場合（たとえば、 angular 1.2.23と angular-sanitize 1.0.0）、ビューにはサニタイズされたバージョンが表示されますが（動作します）、ALOT のエラーが表示されますコンソールまたは時々画面にまったくレンダリングされない場合があります:)-それがあなたが直面していることだと思います

私を信じてください、私はそこにいました:D

于 2015-06-10T08:42:13.343 に答える
8

それは私のために働いた

コントローラーで...

  $scope.trustedHtml = function (plainText) {
            return $sce.trustAsHtml(plainText);
        }

htmlで

   <span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="trustedHtml(hosgeldinizMessage.M_Icerik)"></span>
于 2014-07-08T12:19:33.620 に答える
0

この行：

<div><span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik">{{hosgeldinizMessage.M_Icerik}} </span></div>

する必要があります

<div><span ng-class-odd="'degisimIcerik'" ng-class-even="'degisimIcerik alternate'" ng-bind-html="hosgeldinizMessage.M_Icerik"></span></div>

{{}}表現なし。

ng-bind-htmlコンテンツの表示は、ディレクティブによってすでに処理されています。

于 2014-07-08T09:24:16.373 に答える