Angularjs 动态操作角度指令模板的属性值

我有一个如下格式的指令：

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

基于渲染宽度动态操纵两个图像贴图区域坐标的最佳方法是什么。我会对坐标使用缩放/放大公式，但我不确定在将公式应用于坐标对后获取属性值并更新它们的方法

---

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

您可以在指令中使用

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

您可以尝试以下操作：

var-app=angular.module（'myModule'，['imageMap']）；
角度.module（'imageMap'，[]）
.directive（'imageMap'，[function（）{
返回{
限制：'E'，
范围：正确，
模板：`
`,
控制器：[“$scope”，函数（$scope）{
$scope.getabccoods=函数（imageWidth）{
var-coords；
//计算ABC坐标
返回坐标；
}
$scope.getXyzCoords=函数（imageWidth）{
var-coords；
//计算XYZ坐标
返回坐标；
}
}],
链接：功能（范围、元素、属性）{
var img=element.find（'img'）[0]；
var areas=element.find（'area'）；
角度。forEach（面积，功能（面积）{
if（area.href.endsWith（“\\/abc”））{
area.coords=scope.getabccords（img.width）；
}
else if（area.href.endsWith（“\\/xyz”））{
area.coords=scope.getXyzCoords（img.width）；
}
})
}
}
}])

---

感谢德鲁伊的响应，我被困在获取坐标、操纵坐标以及在指令模板中呈现操纵值的方法上。