CODEWITHSUNDEEP
javascriptjqueryangularjs
user4813899
user4813899

Reputation:

ng-bind-html not working in my context

I am using ngBindHtml directive for append the HTML in AngularJS. It is appending but not as expected some area tag attributes not properly added in the div.

So the onclick event in the area tag is not working. first of all it is not append in the html but in the I am using jQuery .html() it's working fine. I want the answer in Angular approach.

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>";

Output

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

In the output Missing area tag attributes onclick="document.images.shirtguidemeasure.src and styles.

Upvotes: 1

Views: 776

Answers (2)

krivtom
krivtom

Reputation: 24916

ng-bind-html is doing a sanitization using $sanitize service. As part of it some unsafe tokens are removed from the output. In older versions of Angular you could use ng-bing-html-unsafe instead:

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

This directive does not exist in later versions of angular, so you need to explicitly trust value via $sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE).

In this case in your controller you need to add a dependency for $sce and use it to mark HTML as safe:

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

Upvotes: 1

Dmitri Algazin
Dmitri Algazin

Reputation: 3456

I think you are mixing single and double quotes usages, plus HTML on multiple lines should be quoted:

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

Upvotes: 0

Related Questions