Question

我从服务器获取图像映射并尝试使用ng-bind-html显示内容。渲染时，AngularJS会从地图标记中删除名称属性。因此，用户点击在地图中无效。

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

    }]);

Answer 1

使用$sce.trustAsHtml(ImgTag + imgMap);，直到Angular更新代码而不删除name属性。

github - issues 8719

Sample code

AngularJS - 生成动态图像映射

1 个答案: