我遇到从控制器中的http调用获取原始html的情况。然后,我想将此原始html数据发送到angularjs中的视图中。但是,默认情况下,此操作会被AngularJs ngSantize模块阻止,因为html数据可能是恶意的。
因此,我在应用程序的核心中包含了ngSanitize模块,并使用$ sce.trustAs方法将html发送至视图。但是,这仅部分起作用。我确实获得了下划线,粗体和下标标记,但是表格标记被完全省略了。因此,我想知道我做错了什么还是做不到?
我首先包含ngSanitize模块:
(function() {
'use strict';
angular
.module('app.core', [
/* Angular modules */
'ngAnimate',
'ngSanitize',
/* Cross-app modules */
'blocks.exception',
'blocks.logger',
'blocks.router',
'blocks.filter',
/* Cross-app service modules */
'services.dateservice',
'services.textservice',
'services.sharepointservice',
'services.applicationinsightsservice',
'services.menuservice',
/* 3rd-party modules */
'AdalAngular',
'ui.router',
'restangular',
'angular-loading-bar',
'angular.filter',
'ui.bootstrap',
'ui.select',
'ngStorage',
'ct.ui.router.extras',
'ct.ui.router.extras.core',
'pascalprecht.translate',
// 'ApplicationInsightsModule',
'ui.grid'
/* 'adf.widget.latestblogs',
'adf.widget.peoplesearch'*/
]);
})();
在我的设置配置中,我具有以下白名单/黑名单:
angular.module('app').config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['**']);
});
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|skype|callto|sip|tel):/);
我发送的html
<p>Dit is een test voor de foto van ggd</p>
<p> </p>
<div class="canvasRteResponsiveTable">
<div class="tableWrapper">
<table title="Table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tbody>
</table>
,
,
<p> </p>
<p>xcccxcxc<s> cx</s> c<strong> xc</strong> c <u>dc </u>d v © copyright</p>
<p> </p>
<p> </p>
在我的控制器中,我使用以下代码设置数据:
var cleanDataHtml = $sce.trustAs('html', cleanData);
console.log(cleanData);
vm.widget.rteContent = cleanDataHtml
我将其绑定到html视图中,如下所示:
<article ng-if="widget.oneInternalName === 'richText'" class="widget-small-spacer">
<p ng-bind-html="widget.rteContent"></p>
</article>
我的html呈现如下。显示粗体和下划线标签有效,但表格无效...
任何帮助将不胜感激。