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

它对我有用

在控制器...

  $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 回答
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/

注意事项

确保您的ngSanitize版本与您正在运行的AngularJS版本相同，

好吧....由于某种原因，如果您将它们混合在一起（例如 angular 1.2.23和 angular-sanitize 1.0.0），您最终会在您的视图中得到一个经过消毒的版本（它会起作用），但在您的控制台，或者有时它根本不会在屏幕上呈现:) - 我相信这就是你所面临的

相信我，我去过那里：D

于 2015-06-10T08:42:13.343 回答
2 
<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 不起作用？

于 2014-07-08T09:25:03.400 回答
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 回答
-1

我认为使用 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

于 2014-07-08T09:25:13.600 回答