Question

我想在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？

Answer 1

它对我有用

在控制器......

  $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>

Answer 2

获取 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/

指向

确保您拥有 ngSanitize 的相同版本 AngularJS 版本你正在跑步，

很好....出于某种原因如果你将它们混合（例如，角度 1.2.23 和角度消毒 1.0.0 ）你最终会在你的视图中使用已清理的版本（它会起作用），但你的控制台中有很多错误，有时它不会在所有屏幕上渲染:) - 我相信这就是你所面对的

相信我，我去过那里：D

Answer 3

<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"></span></div>            
   </div>

如果绑定到包含HTML的值，则应使用ngBindHtml。这些绑定{{foo}}会出于安全原因阻止注入实际的HTML。

同时检查此$sce

修改

安装angular-sanitize并将其包含在您的依赖项中......

Angular sanitize / ng-bind-html not working?

Answer 4

这一行：

<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指令已经开始显示内容。

Answer 5

我认为使用ng-bind-html-unsafe可以满足您的需求。

<div ng-repeat="hosgeldinizMessage in hosgeldinizMessages" ng-bind-html-unsafe="hosgeldinizMessage.M_Icerik"></div>

这是一个工作小提琴：http://jsfiddle.net/nfreitas/aHfAp/

该指令的文档可在此处找到：http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

ng-bind-html无法正常工作

5 个答案: