Javascript jQuery悬停不适用于AngularJS

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

总之，我有一个使用jQuery hover（）和的网页

我的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")
    }
);

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

这过去很管用。我现在正在学习AngularJS，我决定将我的HTML更改为使用AngularJS加载：

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

我读到这可能是因为我必须绑定事件，因为DOM元素是由Angular构建的。因此，我也尝试了以下两个步骤，但没有任何运气（我尝试了

单击
事件进行测试，以使其变得简单：

$(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); 

但这也不起作用。所以我在这里，希望有人能告诉我这里发生了什么，因为我现在几乎一无所知……
您需要将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")
 }
 );
    }
}
});

然后像这样使用它：

<?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")
    }
);

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


{{character.name}}/..和其他字符属性

更新：
我创建了一个
您需要将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")
 }
 );
    }
}
});

然后像这样使用它：

<?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")
    }
);

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


{{character.name}}/..和其他字符属性

更新：
我创建了一个
@vinayakj是的，它们是
console.log（$（'.player'））。长度
一个输入错误？一个小的jsFiddle就可以了helpful@DavidL是的，它是。更正了。你把它放在指令中了吗？在指令之外用jquery处理角度控制的元素效果不太好。@vinayakj是的，它们是
console.log（$（'.player'））.length
输入错误？一个小的jsFiddlehelpful@DavidL是的。更正了。你把它放在指令中了吗？在指令之外用jquery处理角度控制元素效果不太好。太棒了！成功了！！谢谢你，好心的先生…你真的让我笑了：）现在让我继续阅读更多关于指令和链接的内容……我有一个问题：
元素
变量是否表示jquery对象？与中一样，我可以在上面运行
element.jqueryFunctions（）
吗？
element
变量是一个JQuery Lite元素，这意味着它是JQuery的Lite版本，它不包含所有JQuery函数非常感谢！我还有一个问题。。。在HTML中，在div中有一个类似于
datastyle={{player.style}}
的属性。在link函数中，你知道如何得到它的值吗？如果我提醒
element.attr（'data-style'）
它只打印
{{player.style}}
…因为我要做的是，在mouseout上获取此数据样式并将其应用回div…您可以使用
data style=player.style
而不使用{}用
scope
而不是
attr
来获取它，我更新了真棒！成功了！！谢谢你，好心的先生……你真的让我脸上露出了笑容：）现在让我去读更多关于指令和链接的内容……我有一个问题：
元素
变量是否表示jquery对象？与中一样，我可以在上面运行
element.jqueryFunctions（）
吗？
element
变量是一个JQuery Lite元素，这意味着它是JQuery的Lite版本，它不包含所有JQuery函数非常感谢！我还有一个问题。。。在HTML中，在div中有一个类似于
datastyle={{player.style}}
的属性。在link函数中，你知道如何得到它的值吗？如果我提醒
element.attr（'data-style'）
它只打印
{{player.style}}
…因为我想做的是，在mouseout上获取此数据样式并将其应用回div…您可以使用
data style=player.style
而不使用{}，并使用
范围
获取它，而不是
attr
，我更新了