javascript - ng-bind-html 在我的上下文中不起作用

Question

我正在使用 ngBindHtml 指令在 AngularJS 中附加 HTML。它正在附加但未按预期添加一些区域标记属性，这些属性未正确添加到 div 中。

因此区域标记中的 onclick 事件不起作用。首先，它没有附加在 html 中，但在我使用 jQuery .html() 中它工作正常。我想要 Angular 方法的答案。

HTML

<div ng-bind-html="editor"></div>

Controller

 $scope.editor =  "<p>
      <img alt="how to measure" name="shirtguidemeasure" src="http://www.jcpenney.com/dotcom/images/2013_09_SHIRT_TAB1_HOW_TO_MEASURE.jpg" style="width: 620px; height: auto" usemap="#imgmap201310911202" />
      <map id="imgmap201310911202" name="imgmap201310911202">
        <area _fcksavedurl="test" alt="how to measure" coords="5,4,153,31" onclick="document.images.shirtguidemeasure.src='/mobile/images/2013_09_SHIRT_TAB1_HOW_TO_MEASURE.jpg';" shape="rectangle" style="display: block; cursor: pointer" title="how to measure" />
        <area _fcksavedurl="test" alt="classic" coords="157,4,306,31" onclick="document.images.shirtguidemeasure.src='/mobile/images/2013_09_SHIRT_TAB2_CLASSIC.jpg';" shape="rectangle" style="display: block; cursor: pointer" title="classic" />
        <area _fcksavedurl="test" alt="slim" coords="310,3,459,31" onclick="document.images.shirtguidemeasure.src='/mobile/images/2013_09_SHIRT_TAB3_SLIM.jpg';" shape="rectangle" style="display: block; cursor: pointer" title="slim" />
        <area _fcksavedurl="test" alt="big and tall" coords="464,3,617,31" onclick="document.images.shirtguidemeasure.src='/mobile/images/2013_09_SHIRT_TAB4_BIG_TALL.jpg';" shape="rectangle" style="display: block; cursor: pointer" title="big and tall" />
      </map>
     </p>";

输出

<div ng-bind-html="editor" class="ng-binding">
<p>
<img alt="how to measure" src="http://www.jcpenney.com/dotcom/images/2013_09_SHIRT_TAB1_HOW_TO_MEASURE.jpg" usemap="#imgmap201310911202">
<map>
<area alt="how to measure" coords="5,4,153,31" shape="rectangle" title="how to measure">
<area alt="classic" coords="157,4,306,31" shape="rectangle" title="classic">
<area alt="slim" coords="310,3,459,31" shape="rectangle" title="slim">
<area alt="big and tall" coords="464,3,617,31" shape="rectangle" title="big and tall">
</map>
</p>
</div>

在输出中缺少区域标记属性onclick="document.images.shirtguidemeasure.src 和样式。

Answer 1

ng-bind-html 正在使用 $sanitize 服务进行清理。作为其中的一部分，一些不安全的标记将从输出中删除。在旧版本的 Angular 中，您可以使用 ng-bing-html-unsafe 代替:

<div ng-bind-html-unsafe="editor"></div>

此指令在 Angular 的更高版本中不存在，因此您需要通过 $sce.trustAsHtml 显式信任值。请参阅 Strict Contextual Escaping (SCE) 下的示例.

在这种情况下，您需要在 Controller 中添加 $sce 的依赖项并使用它来将 HTML 标记为安全:

angular.module('mySceApp', ['ngSanitize'])
    .controller('AppController', function($scope, $sce) {
            $scope.editor = $sce.trustAsHtml('YOUR UNSAFE HTML GOES HERE');
        }
    );