AngularJS - Generating dynamic image map

1,171 views
Skip to first unread message

Nasir Mansoor Usmani

unread,
Aug 21, 2014, 10:33:45 PM8/21/14
to ang...@googlegroups.com
I am getting image map from the server and trying to display contents using ng-bind-html. while rendering AngularJS removes name attribute from map tag. Therefore user clicks are not affective in map.

      <body ng-app="imgMapExample">
        <div ng-controller="ExController">
         <p ng-bind-html="ImgData"></p>
        </div>
      </body>

 angular.module('imgMapExample', ['ngSanitize'])
    .controller('ExController', ['$scope', function($scope) {

      var imgPath = "http://www.w3schools.com/tags/";
      var imgPlanet =  imgPath + "planets.gif";
      var imgSun =  imgPath + "sun.htm";
      var imgvenus =  imgPath + "venus.htm";
      var imgmercur =  imgPath + "mercur.htm";

      var ImgTag = '<img src="' + imgPlanet + '" width="145" height="126" alt="Planets" usemap="#planetmap" />';
      var imgMap = '<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="' + imgSun + '"> <area shape="circle" coords="90,58,3" alt="Mercury" href="' + imgmercur + '"> <area shape="circle" coords="124,58,8" alt="Venus" href="' + imgvenus  + '"> </map>';

      var imgMapTest = '<map name="planetmap"></map>';

      $scope.ImgData =  ImgTag + imgMap;

    }]);

Sander Elias

unread,
Aug 22, 2014, 1:39:14 AM8/22/14
to ang...@googlegroups.com
Hi Nasir,

why all the string manipulation in your controller? Its way easier to just include it in the template
http://plnkr.co/edit/dboK35nuXvgNNSJd49LA?p=preview

Binding html to a node can be done in angular, but they get preprocessed for security reasons.
sometimes this has side effects that are a bit strange on first sight.
You can run your html trough the $sce.$trustAsHtml(), and lessen the effect. 

Regards
Sander

Nasir Mansoor Usmani

unread,
Aug 22, 2014, 2:42:57 AM8/22/14
to ang...@googlegroups.com
Hi Sander,

Thank you for your response. My example is not very clear, sorry about that. 

In fact, I am getting chart image and its map (coords) from server  as string. Therefore image src and  image map are dynamic strings that I am getting from server. That is why these were used in controller.

Regards,
Nasir

Sander Elias

unread,
Aug 22, 2014, 3:46:24 AM8/22/14
to ang...@googlegroups.com

Hi Nasir,

Well, then $sce.$trustasHtml(stringFromServer) might help you to solve the issue.

Regards
Sander

​
Reply all
Reply to author
Forward
0 new messages