Привязка событий AngularJS в шаблоне директивы не работает при использовании mouseout, но работает при наведении мыши

Question

Кажется, это какая-то ПРОСТАЯ ПРОБЛЕМА, но я смотрю на нее несколько часов и не могу найти ответ. Почему mouseout или mouseleave не работают там, где работает mouseover? Вот код:

HTML:

<div ng-app="test">
    <div class="testdiv" data-test-mouseout=""></div>
</div>

CSS (не важно в этом случае, я полагаю):

.testdiv {
    width: 100px;
    height: 50px;
    margin: 25px;
    background: yellow;
    position: relative;
}
.testHere {
    position: absolute;
    padding: 0;
    margin: 0;
    background: red;
    width: 100%;
    height: 10px;
    top: -5px;
    left: 0px;
}

JS:

var app = angular.module('test', []);
app.directive('testMouseout', function ($compile) {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseover', function () {
                iElement.html('<div data-test-mouseout-here="" class="testHere">        </div>');
                $compile(iElement.contents())(scope);
            });
        }
    };
});
app.directive('testMouseoutHere', function () {
    return {
        link: function (scope, iElement) {
            iElement.bind('mouseout', function (e) {
                e.target.style.backgroundColor = 'blue';
                console.log('mouseout');
            });
        }
    };
});

Хорошо, что он должен делать? Он будет отображать желтый div 100x50px, и когда вы наведете на него курсор мыши, новый красный div появится внутри как ребенок. Этот красный div имеет привязку mouseout, поэтому он должен console.log "mouseout", но этого не произошло. НО, если вы наведите курсор мыши на mouseover во второй директиве, это работает. Это странно.

Я пытался поместить ngMouseout / ngMouseleave в шаблон внутри первой директивы, но та же проблема. ngMouseout / ngMouseleave не работал ngMouseover работал.

Вот скрипка: http://jsfiddle.net/rGAqw/

То же самое в плункере: http://plnkr.co/edit/JPiHYO79QaNrJerMM59a

Answer 1

Событие "наведение мыши" для "желтого" или содержащего блока имеет приоритет, "красное" поле продолжает обновляться, потому что ваша мышь все еще движется над желтым блоком, поэтому у вас никогда не будет возможности покинуть красное поле. Если вы измените директиву testMouseoutHere для привязки к "mouseover", вы увидите, что она работает, но когда вы вернете ее обратно в "mouseout" или "mouseleave", ничего не произойдет. Если вы отмените привязку к событию "mouseover" в "желтом" поле, оно будет работать.

iElement.bind('mouseover', function () {
    iElement.html('<div data-test-mouseout-here="" class="testHere"></div>');
    $compile(iElement.contents())(scope);

    iElement.unbind('mouseover');
});

http://jsfiddle.net/rGAqw/2/