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.
You can use
ng-if
in the directive so you make sure that the directive is not triggered until you have done all your calculationslike this
isDataLoaded
should be a variable inside$scope
which is set to false by default and changed to true whenever you finish what you want