AngularJS和jQuery冲突

我用AngularJs和jQuery编写了一些代码。 只有一件事可行，AngularJs或jQuery。

似乎jQuery和AngularJs相互冲突。 只要我包含这两个库，它们就不再正常工作了。 如果我只包含其中一个（AngularJS或Jquery），那么该部分可以工作。

但我不知道问题出在哪里：……

$(document).ready(function () { $('#Text').focus(); $(document).on("mouseover", ".englishMtg", function () { var currentHref = $(this).attr("href"); if (currentHref.indexOf("http") == -1) { var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/); var englishSearchString = ".../query?q="+changedLink.toString().replace('.jpg', '').split(',')[0]; $(this).attr("href", englishSearchString); } }); $(document).on("mouseover", ".germanMtg", function () { var currentHref = $(this).attr("href"); if (currentHref.indexOf("http") == -1) { var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/); var germanSearchString = "http://..../query?q="+changedLink.toString().replace('.jpg', '').split(',')[1]; $(this).attr("href", germanSearchString); } }); $(document).on("mouseover", ".tumbailImage", function () { var currentHref = $(this).attr("src"); var changedLink = currentHref.match(/[^\/?#]+(?=$|[?#])/); $(this).closest(".thumbnail").attr("title", changedLink.toString().replace('.jpg', '').split(',')[1]); //alert(changedLink.toString().replace('.jpg', '').split(',')[1]); }); }); 

AngularJS（代码）部分：

  var app=angular.module('myApp', []); function MyCtrl($scope) { $scope.currentPage = 0; $scope.pageSize = 18; $scope.data = ['...']; //some data $scope.numberOfPages=function(){ return Math.ceil($scope.filtered.length / $scope.pageSize); } } app.filter('startFrom', function() { return function(input, start) { start = +start; //parse to int return input.slice(start); } }); 

AngularJS（HTML的部分）：

 
 
 
 
 
 
 
 
  Previous   {{currentpage+1}}/{{numberOfPages()}} ({{filtered.length}} results) = filtered.length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next  
 
 
 
 
 
 search  
 
 width  px 
 
 height  px 
 
 
 
    
 
 
 
 
 
  

即使我使用jQuery 1.6（有时只），我也会收到此错误：

 Error: $scope.filtered is undefined MyCtrl/$scope.numberOfPages@http://localhost:5891/Scripts/Angular/JSONMtgs/jsonAngularJs.js:26200:9 _functionCall/<@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:6193:13 $interpolate/fn@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:4810:22 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:7720:32 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:7926:13 bootstrap/<@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:930:7 invoke@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:2802:1 bootstrap@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:928:1 angularInit@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:904:5 @http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:14527:5 jQuery.Callbacks/fire@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3048:10 jQuery.Callbacks/self.fireWith@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3160:7 .ready@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:433:1 completed@http://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:104:4 return logFn.apply(console, args); angular_1_0_3.js (Zeile 5582) 

谢谢你的帮忙。

Answer 1

jQuery和AngularJS应该以透明的方式协同工作。 如果在AngularJS之前加载jQuery，AngularJS实际上将使用可用的jQuery而不是“迷你”内置的jQuery克隆（jqLit​​e）。

然而，在FAQ（ https://docs.angularjs.org/misc/faq ）中提到“Angular 1.3仅支持jQuery 2.1或更高版本.jQuery 1.7和更新版本可能与Angular一起正常工作但我们不保证这一点。 ”。 根据您的Angular和jQuery的版本，它可能是您的问题的原因。

Answer 2

你应该在angularJs之前使用jquery

读这个thead

这是在一个项目中添加Jquery和Angularjs的正确方法

Answer 3

是的，当应用程序被引导时，Angular可以使用jQuery，如果它存在于您的应用程序中。 如果你的脚本路径中没有jQuery，Angular会回到它自己的jQuery子集实现中，我们称之为jQLite。 Angular 1.3仅支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能与Angular正常工作，但我们不能保证。

我还建议你只使用JQLite ..它几乎具有Jquery的function。 但是如果你想使用Jquery而不是Lite版本，那么在Angular-Script之前加载Jquery。

Answer 4

尝试使用firebug来捕获JS / JQuery / AJS的错误。 firebug是Mozilla Firefox的一个插件，你应该已经安装了firefox的更新版本。