Question

当我按.on()获取数据时，

jQuery $http()无法使用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;
});

我的箭头渲染正常，但事件没有约束力。我在调试控制台中没有错误。我该如何解决这个问题？

Answer 1

这里不需要使用jQuery，只需使用ngMouseenter和ngMouseleave，然后就可以在控制器中定义处理程序：

标记（statused =＆gt;状态）：

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

控制器：

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

Answer 2

当statused未定义时，页面上没有任何div.arrow，因此$(".arrow")将为空。您需要在加载和呈现statused之后附加处理程序，或使用容器和事件委托，或使用ng-mouseenter指令。

Angular + jQuery .on（）不适用于ng-repeat

2 个答案: