javascript - Angular + jQuery .on() 不适用于 ng-repeat

Question

当我通过 $http() 获取数据时，jQuery .on() 无法与 ng-repeat 一起使用。

工作正常:

<div ng-repeat="item in ['arrow-new', 'arrow-work', 'arrow-close']" class="arrow {{item}}">
</div>

事件:

$(".arrow").on('mouseenter mouseleave', function (event) {
  if (event.type == 'mouseenter') {
    //Ok
  } else {
  }
});

但是当我使用 $http() 加载数组进行迭代时，如下所示:

<div ng-repeat="item in statused" class="arrow {{item}}">
</div>

$http({ method: 'GET', url: '/app/data/statuses.json' }).success(function (data) {
   $scope.statused = data;
});

我的箭头渲染得很好，但事件没有绑定(bind)。我在调试控制台中没有错误。 我该如何解决这个问题？

Answer 1

这里不需要使用jQuery，只需使用ngMouseenter和 ngMouseleave然后您可以在 Controller 中定义处理程序:

标记(状态 => 状态):

<div ng-repeat="item in statuses" class="arrow {{item}}" 
    ng-mouseenter="handleEvent()" ng-mouseleave="handleEvent()"></div>

Controller :

$scope.handleEvent = function(){
    //add logic here
}