Question

我从Angular学习了一段时间后休息了一段时间，我又回来了，并且在控制图像地图方面遇到了一些问题。

基本上，我有一堆形状怪异的地图，我希望鼠标滚动来控制早期ngRepeat中的过滤器 - 我知道我可以在标准div上设置ng-mouseEnter来改变模型的价值和实时更新我的数据，但我不知道如何在地图内工作，因为ng-mouseEnter不能使用标准图像地图。

我的想法是，我设置了一个非常简单的内联脚本函数：

function showThis(thing) {
    return thing;
}

让我的onMouseEnter部分图像映射更新该函数，然后在我的过滤器中引用它。我在代码中想到的一个简单示例（我的一个图像映射区域被复制粘贴，以表明只是制作不可见的div很难） -

...
<script>
function showThis(thing) {
    console.log(thing);
    return thing;
};
</script>

<div class="foobars" ng-repeat="foo in fooBar | filter:showThis():true">
    <p class="foo_text">{{foo.snippet}}</p>
    <img ng-src="{{foo.imagePath}}">
</div>

<div class="images">            
    <img src="images/map/base.png" usemap="#imagemap">
        <map name='imagemap'> 
            <area shape='poly' alt='Area One' href='' coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296' onMouseEnter='showThis(1)'/> 
            <area shape='poly' alt='Area Two' href='' coords='245,170,186,194,144,176,149,136,212,110,252,123'  onMouseEnter='showThis(2)' /> 
        </map>
</div>

但这不起作用，我无法弄清楚如何让这个想法得以运行。我明显遗漏了一些明显的东西，但我不知道 - 我知道我可以在控制器中创建一个自定义过滤器，但我仍然不知道如何关联图像映射＆＃39; s＆＃34; onMouseOver＆＃34;使用控制器内的过滤器。 Angular和图像地图的这一特殊功能似乎与我蹩脚的眼睛一起工作得非常好。

I made a plunkr here显示我的破解代码。我哪里错了？

Answer 1

我forked your plunker做了一些改动后，我认为，解决了你试图解决的问题......

关于ng-mouseenter的使用，@ wZVanG所说的是正确的。

此外，我不太确定你的计划是showThis和你的第二个ng-repeat，所以我添加了一个函数setSnippet，在鼠标输入时调用然后通过一个简单的div显示图像下的正确片段。

希望有所帮助。

Answer 2

使用ng-mouseenter代替onMouseEnter，在area元素的href属性中添加＃以避免重新加载页面：

<area shape='poly' alt='Area One' href='#' ng-mouseenter='showThis(1)'
   coords='33,288,35,276,41,272,60,276,96,234,97,198,140,171,189,192,182,242,144,261,144,271,108,286,66,297,42,296'/>

Angular JS - 图像映射和过滤器

2 个答案: