Dynamically manipulate attribute values of Angular directive template

Question

Dynamically manipulate attribute values of Angular directive template

337 views Asked by Navaneeth At 27 December 2016 at 16:51

I have a directive in this format:

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

The image is set to a flexible width i.e 100%, hence it will take the screen's full width and can change from the actual size 1920*1080.

What's the best way to dynamically manipulate the co-ordinates of the 2 image map areas based on the rendered width. I would be using the scale down/up formula for the co-ordinates, but I am unsure of the method to fetch the attribute values and update them after applying the formula to the pairs.

I have tried using the link function of the directive, but was unsuccessful.

Original Q&A

There are 2 answers

**amrdruid** · Answer 1 · 2016-12-27 18:23:42

You can use ng-if in the directive so you make sure that the directive is not triggered until you have done all your calculations

like this

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

isDataLoaded should be a variable inside $scope which is set to false by default and changed to true whenever you finish what you want

**Hoyen** · Answer 2 · 2016-12-27 19:36:03

You can try something like this:

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>

TechQA.

Dynamically manipulate attribute values of Angular directive template

There are 2 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-DIRECTIVE

Related Questions in IMAGEMAP

Popular Questions

Popular Tags

Trending Questions