ng-bind-html 无法正常工作答案

【问题标题】：ng-bind-html doesn't work properlyng-bind-html 无法正常工作
【发布时间】：2014-08-28 23:17:30
【问题描述】：

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

【问题讨论】：

stackoverflow.com/questions/19415394/…
还有一个 div 没有正确关闭

标签： javascript jquery html angularjs ng-bind-html

【解决方案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/

注意事项

确保您的 ngSanitize 版本与 AngularJS 版本相同你在跑，

嗯 .... 出于某种原因如果你 将它们混合在一起（例如 angular 1.2.23 和 angular-sanitize 1.0.0）您最终会在您的视图中看到一个经过清理的版本（它会起作用），但在您的控制台中有很多错误，或者有时它不会全部呈现在屏幕上:) - 我相信这就是你所面临的

相信我，我去过那里：D

【讨论】：

【解决方案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>

【讨论】：

【解决方案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?

【讨论】：

你能创造出你所做的事情......吗？

【解决方案4】：

我认为使用 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-unsafe 已被弃用

【解决方案5】：

这一行：

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

【讨论】：