ng-bind-html不能正常工作

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形式显示它？

- cagin

---

https://dev59.com/HGIk5IYBdhLWcg3wTcYr - paul

还有一个div没有正确关闭。 - edi9999

Answer 1

在你的模块中作为依赖项获取 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版本

好的...出于某些原因，如果你混淆了它们(例如：angular1.2.23和angular-sanitize1.0.0)，你将会在视图中获得已消毒版本（它能工作），但是在控制台上会有很多错误，有时候干脆根本无法显示:)-我相信这就是你所面临的问题。

相信我，我也曾经历过这些:D

- Fahad

Answer 2

它对我有效

在控制器中...

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

- cagin

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?

- Srinath

---

你能创建一个fiddle来展示你做的事情吗？ - Srinath

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指令已经处理了内容的显示。

- Sang Suantak

Answer 5

我认为使用ng-bind-html-unsafe可以得到你所需的结果。

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

这是一个可用的fiddle：http://jsfiddle.net/nfreitas/aHfAp/ 指令的文档可以在这里找到：http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

- parthicool05

---

ng-bind-html-unsafe已被弃用。 - paul