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