angular.js - Menambah jquery ke sudut, pemilih tidak boleh digunakan

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

Perkenalkan jQuery sebelum memperkenalkan AngularJS, dan AngularJS akan menggunakan jQuery dan bukannya jqLitenya sendiri.
Lihat dokumentasi AngularJS untuk butiran

Jika jQuery tersedia, angular.element ialah alias untuk fungsi jQuery Jika jQuery tidak tersedia, angular.element mewakilkan kepada subset terbina dalam jQuery Angular, dipanggil "jQuery lite" atau jqLite.

Untuk menggunakan jQuery, cuma pastikan ia dimuatkan sebelum fail angular.js Anda juga boleh menggunakan arahan ngJq untuk menentukan bahawa jqlite harus digunakan melalui jQuery, atau untuk menggunakan versi jQuery tertentu jika berbilang versi wujud pada. halaman.

Kod yang diletakkan dalam pengawal Sudut tidak perlu disertakan dalam fungsi panggil balik $(document).ready().
Apabila kod pengawal dilaksanakan, acara sedia dokumen telah pun berlaku.

Answer 2

Apabila menggunakan jQuery dalam Angular, kerana simbol "$" juga digunakan, anda perlu mewakilkan $ kepada jQuery untuk digunakan

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