动态操纵

我在这个格式的指令角指令模板的属性值：动态操纵

<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个图像贴图区域的坐标的最佳方法。我将使用缩放/向上公式来计算坐标，但我不确定如何获取属性值并在将公式应用于对之后进行更新。

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

来源

2016-12-27 Navaneeth

您可以使用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

来源

2016-12-27 18:23:42 amrdruid

感谢您的答复德鲁伊，我停留在方法来获取坐标和操纵他们，我的指令模板呈现操纵值。 – Navaneeth

你可以试试这样：

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="[email protected]" 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>

来源

2016-12-27 19:36:03 Hoyen

回答

相关问题