angulaire.js - Ajout de jquery à angulaire, le sélecteur ne peut pas être utilisé

Question

$(document).ready(function(){
    $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});
 
    });
在一个angular项目里面加上面这段jquery代码，会跑不起来，把".team"改成"p"后可以使用，team是html中已经有过声明的p，在非angular项目里面用同样的代码可以跑起来。  我想知道angular中引入jquery对jquery选择器产生了影响吗？ 如果有影响，为什么下面的".shadow"又能够被选择到呢？  纠结了一下午，希望大神能够解答一下。

下面是一些相关的代码:
依赖部分：
 <script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/jquery-loading/dist/jquery.loading.min.js"></script>
<!-- AngularJS dependences -->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
html部分:    
       <p  class="team" ng-repeat="group in groups">
              显示内容省略
        <p class="shadow">
           
        <p class="content">详情</p>
        <p class="edit">编辑</p>
    </p>

</p>
js部分（把这段代码放在这个页面的控制器里面的）:
$(document).ready(function($){
     $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});

    }(jQuery));

Answer 1

Introduisez jQuery avant d'introduire AngularJS, et AngularJS utilisera jQuery au lieu du jqLite intégré.
Voir la documentation AngularJS pour plus de détails

Si jQuery est disponible, angulaire.element est un alias pour la fonction jQuery. Si jQuery n'est pas disponible, angulaire.element délègue au sous-ensemble intégré de jQuery d'Angular, appelé "jQuery lite" ou jqLite.

Pour utiliser jQuery, assurez-vous simplement qu'il est chargé avant le fichier angulaire.js. Vous pouvez également utiliser la directive ngJq pour spécifier que jqlite doit être utilisé sur jQuery, ou pour utiliser une version spécifique de jQuery si plusieurs versions existent sur le. page.

Le code placé dans le contrôleur Angular n'a pas besoin d'être inclus dans la fonction de rappel de $(document).ready().
Lorsque le code du contrôleur est exécuté, l'événement prêt du document s'est déjà produit.

Answer 2

Lorsque vous utilisez jQuery dans Angular, comme le symbole "$" est également utilisé, vous devez déléguer $ à jQuery pour utilisation

$(document).ready(function($){
    $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});
 
}(jQuery));