嵌套ng-repeat

Question

我一直在寻找一些时间并阅读ng-repeat创建它自己的范围，但仍然找不到解决方案。

我想在每个.event-window element上触发一次鼠标悬停事件。使用ng-mouseover="hoverIn()"不起作用。我期望因为尝试调用不属于范围的函数，而只调用父（父）范围的一部分，因为调用在不使用ng-repeat创建的元素中正常工作。

<div class="day-window" ng-repeat="day in weekObject['days']">
<div ng-repeat="event in day.events track by $index">
    <div class="event-window" ng-style="{'height': (event.length)+'px',
                                         'position': 'absolute',
                                         'top':(1565/24)*(event.offsetTop-1) +'px',
                                         'left': getLeftCoords(event.colliding)+'%',
                                         'width': 100/event.colliding+'%',
                                         'background': event.color,
                                         'opacity': 0.8}" ng-mouseover="hoverIn()">
        <p>{{event.title}}</p>
        <p>[{{event.startTime |date:'H:mm'}} - {{event.endTime |date:'H:mm'}}]</p>
    </div>
</div>

控制器

$scope.hoverIn = function() {
    alert('hoverIn');
}

在我的CSS中悬停不起作用。是否被ng-style覆盖？

.event-window:hover {
    opacity: 1.0 !important;
}

您可以找到演示here，但我无法复制问题。我的代码中必定存在一些错误。