Question

我有这种格式的指令：

<img id="imgId" src="img/sample.jpg" border="0" width="100%" usemap="#image-maps-sample" alt="" />
<map name="image-maps-sample" id="sampleMap">
    <area  alt="" title="" href="#/abc" shape="poly" coords="132,884,219,778,258,767,129,995,140,976" style="outline:none;" target="_self"/>
    <area  alt="" title="" href="#/xyz" shape="poly" coords="1147,963,1139,951,1135,920,1137,893,1173,990,1156,978" style="outline:none;" target="_self"/>
</map>

图像被设置为灵活的宽度，即100％，因此它将占据屏幕的全宽，并且可以从实际尺寸1920 * 1080变化。

根据渲染宽度动态操作2个图像映射区域的坐标的最佳方法是什么。我将使用缩放/向上公式作为坐标，但我不确定获取属性值的方法，并在将公式应用于对后更新它们。

我已尝试使用该指令的链接功能，但未成功。

Answer 1

您可以在指令中使用ng-if，这样您就可以确保在完成所有计算之后不会触发指令

像这样

<img id="imgId" src="img/sample.jpg" border="0" width="100%" usemap="#image-maps-sample" ng-if="isDataLoaded" alt="" />

isDataLoaded应该是$scope内的变量，默认情况下设置为false，并在您完成所需内容时更改为true

Answer 2

您可以尝试这样的事情：

var app = angular.module('myModule', ['imageMap']);

angular.module('imageMap', [])
.directive('imageMap',[function() {
    return {
      restrict: 'E',
      scope: true,
      template: `
<img id="imgId" src="img/sample.jpg" border="0" width="100%" usemap="#image-maps-sample" alt="" />
<map name="image-maps-sample" id="sampleMap">
    <area  alt="" title="" href="#/abc" shape="poly" coords="132,884,219,778,258,767,129,995,140,976" style="outline:none;" target="_self"/>
    <area  alt="" title="" href="#/xyz" shape="poly" coords="1147,963,1139,951,1135,920,1137,893,1173,990,1156,978" style="outline:none;" target="_self"/>
</map>
      `,
      controller: ["$scope",function($scope){
        $scope.getAbcCoords = function(imageWidth){
          var coords;
          // do calculations for ABC coords
          return coords;
        }
        $scope.getXyzCoords = function(imageWidth){
          var coords;
           // do calculations for XYZ coords
          return coords;
        }
      }],
      link: function(scope,element,attr){
        var img = element.find('img')[0];
        var areas = element.find('area');
        angular.forEach(areas,function(area){
            if(area.href.endsWith("#\/abc")){
              area.coords=scope.getAbcCoords(img.width);   
            }
            else if(area.href.endsWith("#\/xyz")){
              area.coords=scope.getXyzCoords(img.width);
            }
        })
      }
    }
}])

<!DOCTYPE html>
<html ng-app="myModule">

  <head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
  <image-map></image-map>
  
  </body>

</html>

动态操作Angular指令模板的属性值

2 个答案: