angular.js - angular中加jquery,选择器使用不了

问题描述

问 题

$(document).ready(function(){
    $(".team").hover(function(){$(".shadow").css("display","block");console.log("1")},
    function(){$(".shadow").css("display","none");console.log("0")});
 
    });
在一个angular项目里面加上面这段jquery代码，会跑不起来，把".team"改成"div"后可以使用，team是html中已经有过声明的div，在非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部分:    
       <div  class="team" ng-repeat="group in groups">
              显示内容省略
        <div class="shadow">
           
        <div class="content">详情</div>
        <div class="edit">编辑</div>
    </div>

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

    }(jQuery));

解决方案

在引入AngularJS之前引入jQuery，AngularJS就会使用jQuery代替自带的jqLite。
详见AngularJS文档

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.

To use jQuery, simply ensure it is loaded before the angular.js file. You can also use the ngJq directive to specify that jqlite should be used over jQuery, or to use a specific version of jQuery if multiple versions exist on the page.

放在Angular控制器里的代码 不需要包含在$(document).ready()的回调函数里。
当控制器代码被执行时，文档的ready事件早就已经发生过了。

这篇关于angular.js - angular中加jquery,选择器使用不了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！