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