javascript - 如何使用 AngularJS 在部分 html 文件中悬停时突出显示图像图中的区域

Question

我已经使用 AngularJS 设置了一个单页 Web 应用程序，在我的一个部分中，我有一个图像映射，并想在鼠标悬停时突出显示这些区域。我试着四处寻找，试图弄清楚如何做到这一点，但我不确定出了什么问题。这是代码。

我尝试使用 https://github.com/cowglow/AngularJS-maphilights作为资源

<section class="artistinfo">
 <div class="artist cf">
<h1>Select a room for more details</h1>
<div class="info">
  <img ng-src="images/housediagram.jpg" alt="Photo of thing" class="map" usemap="#houseMap">
  <map name="houseMap" id="Map" class="maphilight">
    <area name="kitchen" shape="poly" coords="197,193,348,194,349,301,197,302" href="#/kitchen"/>
    <area name="livingroom" shape="poly" coords="349,194,349,300,562,301,561,192" href="#/livingroom"/>
    <area name="laundry" shape="poly" coords="389,309,390,399,562,399,563,308" href="#/laundry"/>
    <area name="basement" shape="poly" coords="387,309,388,399,197,399,197,306" href="#/basement"/>
    <area name="office" shape="poly" coords="198,108,196,190,301,191,301,83,256,80" href="#/office"/>
    <area name="bathroom" shape="poly" coords="301,83,302,190,418,191,417,83" href="#/bathroom"/>
    <area name="bedroom" shape="poly" coords="419,83,417,192,560,191,560,109,494,80" href="#/bedroom"/>
  </map>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>

  <script type="text/javascript" src="angular-maphilights.js"></script>

  <script type="text/javascript" charset="utf-8">
    angular.module('map', ['maphilights']);

  </script>
</div>

Answer 1

您必须编辑他的代码，因为他实际上并没有调用执行突出显示的 jQuery 函数。您可以将链接功能替换为以下内容

link: function (scope, element, attr) {
            $(element).load(function () {
                $(element).maphilight();
            }).trigger('load');
        }

此外，请务必在 <img> 上应用您的指令标签，而不是 <map>标签。