AngularJS在$ sce无法正常工作的情况下将HTML从控制器发送到视图

时间:2018-12-18 09:38:26

标签: angularjs

我遇到从控制器中的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 &copy; 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呈现如下。显示粗体和下划线标签有效,但表格无效...

enter image description here

任何帮助将不胜感激。

0 个答案:

没有答案