動態操縱

我在這個格式的指令角指令模板的屬性值：動態操縱

<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

回答

相關問題