ng绑定html不'工作不正常

ng-bind-html doesn't work properly

本文关键字：工作 不正常 绑定 html ng      更新时间：2023-09-26

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

获取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 cleanup1.0.0(，您最终会看到一个已清理版本在您的视图中(它会起作用(，但控制台中存在大量错误，或者有时它根本无法在屏幕上显示：(-我相信这就是您面临的

相信我，我去过那里：D

它对我有效

在控制器中。。。

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

<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 clease并将其包含在您的依赖项中。。。

Angular消毒/ng绑定html不工作？

此行：

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

而没有CCD_ 1表达。

内容的显示已经由ng-bind-html指令负责。

我认为使用ng-bind-html-insafe将获得您所需要的。

<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

相关文章：