Angular JS - 图像映射和过滤器答案

【问题标题】：Angular JS - Image Maps and filtersAngular JS - 图像映射和过滤器
【发布时间】：2015-06-06 03:42:01
【问题描述】：

我在学习 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>

但这不起作用，我不知道如何让这个想法发挥作用。我显然遗漏了一些明显的东西，但我不知道是什么 - 我知道我可以在控制器中创建自定义过滤器，但我仍然不知道如何将图像映射的“onMouseOver”与控制器内的过滤器相关联.在我跛脚的眼里，Angular 和 imagemap 的这一特殊功能似乎不能很好地协同工作。

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

【问题讨论】：

标签： javascript angularjs imagemap

【解决方案1】：

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

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

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

希望对您有所帮助。

【讨论】：

你是我的英雄。我稍微调整了您的代码以与我正在组合的实际站点一起使用，因为我有五六个不同的东西受到每个图像映射区域的影响，但这个问题最终得到了解决。而且，它向我展示了一种比我使用的更好、更清洁的信息过滤方式；我非常热衷于使用 ng-repeat 和过滤器，以至于我什至没有考虑只返回单个项目。对此我感激不尽。

【解决方案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'/>

【讨论】：