Angular JS-图像贴图和滤镜

萨斯帕里洛

我在学习Angular上休息了一会儿,然后又跳回去,在控制图像贴图时遇到了一些问题。

基本上,我的地图上有一堆怪异的形状,我希望鼠标悬停来控制较早的ngRepeat中的过滤器-我知道我可以在标准div上设置ng-mouseEnter来更改模型的值并实时更新我的​​数据,但是我不知道如何在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”与控制器中的过滤器关联。在我la脚的眼睛看来,角度和影像地图的这一特殊功能似乎并不能很好地协同工作。

我在这里制作了一个punkr来显示破碎的代码。我要去哪里错了?

sfletche

叉你plunker做一些改变,我认为,解决您试图解决的问题后...

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

此外,我不太确定您的计划是什么,而您的计划是showThis第二个ng-repeat,因此我添加了一个函数,setSnippet函数在鼠标输入时调用,然后通过一个简单的div在图像下方显示正确的代码段。

希望能有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章