Почему директива ng-mouseenter не срабатывает на созданные директивой ng-if элементы?

Question

[GuRax]

Добрый день.
Совместно с AngularJS используется SVG.
В SVG нарисовано некоторое количество кругов.

<defs>
		<g id="test"> 
			<circle cx="0" cy="20" r="20"/>
		</g>
	</defs>
<g ng-repeat="node in nodes" ng-mouseenter="focusIn()" ng-mouseleave="focusOut()">
      <g ng-if="visible">
         <ellipse id="2" cx="20" cy="0" rx="20" ry="20" />
         <g >
            <use id="3" xlink:href="#test" x="0" y="0" /> 
         <g/>
      <g/>
   <circle id="1" cx="0" cy="0" r="20"/>
</g>

******************
$scope.visible = false;
$scope.focusIn=function() {
$scope.visible = true;
}
$scope.focusOut=function() {
$scope.visible = false;
}

Вопрос в следующем. Мы видим круги (id=1). Если мы наводим на один из них, то рядом с этим кругом появляется эллипс (id=2) и второй круг(id=3). При попытке навести курсор на элипс( id=2), ничего не происходит, т.е. он воспринимается как единое целое с кругом (id=1). Но если мы наведем на круг (id=3), то эллипс и этот круг пропадают, потому что срабатывает директива ng-mouseleave.
Как сделать так, чтоб ng-mouseenter реагировала и на круг (id=3)?

Извиняюсь, если немного непонятно задал вопрос.

Answer 1

[_ _]

А похоже это проблема конкретно с тэгом use. jQuery используете?

Answer 2

[iCat]

Я могу ошибаться, но мне ситуация видится так:
Фигуры id=1, id=2, id=3 у вас, по идее, должны являться "одним целым", так как объединены общим родителем, для которого и заданы mouseenter/mouseleave, и в случае с id=1 и id=2 мы подобное поведение и видим, по логике вещей у фигуры id=3 должно быть соответствующее поведение, т.е. при наведении на нее mouseenter не должен срабатывать (он уже сработал, когда вы навели мышь на фигуру id=1) просто не должен срабатывать и mouseleave.
Возможно, это связано с геометрией, и поможет в <use> установить необходимые координаты вместо x=0 y=0, поставить x=0 y=20, а в <defs> для фигуры не устанавливать координат.
А может, mouseleave срабатывает потому, что фигура берется извне, и он будет срабатывать в любом случае (хотя, по логике, не должен).

Answer 3

[GuRax]

jQuery пока не хотел использовать.

iCat верно подметил, что mouseenter уже сработал.
Вопрос в том, как сделать чтоб при наведении на фигуру с id=3 не срабатывал mouseleave. (тюею считал это одним целым с фигурой id=1)

Comments

[iCat]

Вместо формы ответа лучше используйте функцию комментирования других ответов. В данном случае это было бы и удобнее и правильнее. А еще неплохо было бы набросать рабочий пример вашей проблемы на каком-нибудь jsbin или подобном сервисе, с которым можно было бы поэкспериментировать.

[lega]

> как сделать чтоб при наведении на фигуру с id=3 не срабатывал mouseleave

можно подсчитывать кол-во входов и выходов, если входов больше то все ещё "внутри"

Answer 4

[VanKrock]

Возможно в данном случае вам нужен ng-mouseover, а не ng-mouseenter