角度：在懸停上更新範圍

Question

我希望當您將鼠標懸停在主div上時，默認情況下會隱藏主div的某個子div。

我試圖讓角度原生並忘記在jquery中的.hover()方式。

我雖然在子div上使用ng-show，然後更新綁定當我懸停主div。是否有聽取懸停的指令？

Answer 1

你在正確的軌道上。您實際上可以使用ngMouseenter和ngMouseleave指令來執行此操作。

<span ng-mouseenter="show = true" ng-mouseleave="show = false"> 
    Mouse over me. 
</span> 

<div ng-show="show">Hello!</div> 

這裏有一個工作Plunker：http://plnkr.co/edit/Ro80nR7HT7OGGPCXjz7E?p=preview

@ Swordfish0321也是正確的 - 你可以寫一個非常簡單的指令，專門爲懸停聽，如果你願意，但它可能沒有必要。例如，我們使用mouseenter和mouseleave作爲UI Bootstrap中的工具提示。

Answer 2

感謝@JoshDavidMiller提供了一個非常簡潔的答案。我需要以ng-repeat的方式做到這一點，並不能完全弄清楚這種做法的優雅方式。在範圍上使用布爾值顯示了列表中所有元素的編輯控件，而不僅僅是我正在懸停的元素。我幾乎彎腰鞭撻出angular.element（即JQuery）並附加懸停處理程序，以便他們可以手動顯示懸停元素的控件。我很高興我沒有彎腰走向這種邪惡的方式。

<div ng-repeat="item in items" ng-mouseenter="item.showEdit = true" ng-mouseleave="item.showEdit = false"> 
    <span class="glyphicon glyphicon-edit" ng-show="item.showEdit"></span> 
    Mouse over me. 
</div> 

物業只需裝到item而非$scope。在一些情況下，我無法將隨機密鑰添加到列表中的項目中，因此我將數組映射到了一個新陣列，其中item實際上是包裝器對象上的一個屬性，然後我可以將任何我想要的屬性附加到包裝器對象而不會污染item密鑰。