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

Question

我正在使用ngBindHtml指令在AngularJS中附加HTML。 它追加但未按预期那样在div未正确添加一些区域标签属性。

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

HTML

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

调节器

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

在输出的Missing area标签中，属性为onclick="document.images.shirtguidemeasure.src和样式。

Answer 1

ng-bind-html正在使用$sanitize服务进行$sanitize 。 作为其一部分，一些不安全的令牌将从输出中删除。 在较旧的Angular版本中，您可以改用ng-bing-html-unsafe ：

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

在angular的更高版本中不存在此伪指令，因此您需要通过$ sce.trustAsHtml显式信任值。 请参阅严格上下文转义（SCE）下的示例。

在这种情况下，您需要在控制器中为$sce添加一个依赖项，并使用它来将HTML标记为安全：

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

Answer 2

我认为您正在混合使用单引号和双引号，并在多行上加上HTML应该用引号引起来：

$scope.editor =  
  '<p>'+
  '<h1 style="color: red;">MY HEADER</h1>'+
  '</p>';