Динамически манипулировать значения атрибутов углового шаблона директивы

я имею директиву в следующем формате:Динамически манипулировать значения атрибутов углового шаблона директивы

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

Каков наилучший способ динамического управления координатами двух областей карты изображения на основе отображаемой ширины. Я бы использовал формулу масштабирования вниз/вверх для координат, но я не уверен в том, что метод извлекает значения атрибутов и обновляет их после применения формулы к парам.

Я попытался использовать функцию ссылки директивы, но не увенчался успехом.

источник

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

Динамически манипулировать значения атрибутов углового шаблона директивы

ответ

Смежные вопросы