jQuery悬停不适用于AngularJS

Question

我编辑了我的代码，只提取了所需的部分，使这个问题更容易理解。 整个代码很大，因为它是现有系统的副本，并且会有太多代码需要通读。

所以 - 简而言之，我有一个网页，我使用jQuery hover（）和jQueryContextMenu插件 。

我的HTML页面看起来像这样：

<?php
foreach($characters as $character) {
  echo "<div class='player'>";
    echo "<div>". $character->name. "</div>"; //other character attributes
  echo "</div>";
}
?>

我的悬停功能如下所示：

$('.player').hover(
    function(){
        $(this).addClass('hovering');
        alert("Class added");
    },
    function(){
        $(this).removeClass('hovering');
        alert("Class removed")
    }
);

这曾经工作得很好。 我现在正在学习Angular，我决定使用AngularJS更改我的HTML：

<div ng-controller="playerController">
  <div class='player' ng-repeat="character in characters">
      <div>{{character.name}}</div> //..and other character attributes
  </div>
</div>

我还有一个playerController ，它从我的php后端获取数据并将其转换为Angular消耗的JSON。

所有这一切都很好。我得到播放器列表和我的上下文菜单也可以，我可以右键单击并执行操作。

只有我的hover()函数不起作用！ 如果我执行console.log($('.player').length)则打印0 。 上下文菜单插件也绑定到同一个类，但它可以正常工作：

$.contextMenu({
    selector: '.player',
    trigger: 'right',
    ... other options

我读到这可能是因为我必须bind事件，因为DOM元素是由Angular构建的。 所以我尝试了以下两个步骤也没有任何运气（我尝试click事件进行测试，以使其变得简单：

$(document).bind("click",".player",function(){alert("hi")});

$(document).on("click",".player",function(){alert("hi")});

我试过各种变化：

$('.player').bind("click",function(){alert("hi")});

$('.player').on("click",function(){alert("hi")});

我在jQuery的ready()函数中尝试了所有这些但是没有用。 （没有显示警报）。

最后，我将这两个语句包装在一个名为jQueryInit()的函数中，我尝试从AngularJS触发这两个函数，如下所示：

playerController:
... //other lines of code
$scope.$on('$viewContentLoaded', jqueryInit); 

但那也没有用。 所以我在这里，希望有人能告诉我这里发生了什么，因为我现在几乎无能为力......

Answer 1

您需要将JQuery代码移动到指令：

directive('customHover', function () {
return {
    link: function (scope, element, attr) {
        element.hover(
 function () {
     $(this).addClass('hovering');
     alert("Class added");
 },
 function () {
     $(this).removeClass('hovering');
     alert("Class removed")
 }
 );
    }
}
});

然后像这样使用它：

<div ng-controller="playerController">
<div custom-hover ng-repeat="character in characters">
  <div>{{character.name}}</div> //..and other character attributes
</div>
</div>

更新：我创建了一个jsFiddle