Angular: обновление области при наведении

Я бы хотел, чтобы какой-либо дочерний div основного div был скрыт по умолчанию, когда вы наводили указатель на главный div.

Я пытаюсь иметь этот родник в angular и забыть способ .hover() в jquery.

Я хотя об использовании ng-show в дочернем div, а затем обновляю привязку, когда нахожу главный div. Есть ли директива для прослушивания для зависания?

Ответы

Ответ 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.

Ответ 2

Спасибо @JoshDavidMiller за очень сжатый ответ. Мне нужно было сделать это в ng-повторе и не мог понять, как это сделать. Использование логического в области видимости показывало элементы управления редактирования для всех элементов в списке, а не только того, над которым я витал. Я почти наклонился, чтобы вырвать angular.element (т.е. JQuery) и сам привязать обработчики hover, чтобы они могли вручную отображать только элементы управления для зависающего элемента. Я рад, что не опустился до таких злых путей.

<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.