AngularJS 和 jQuery 冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28064784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS and jQuery conflict
提问by user254197
I wrote some code with AngularJs and jQuery. Only one thing works, either AngularJs or jQuery.
我用 AngularJs 和 jQuery 写了一些代码。只有一件事有效，AngularJs 或 jQuery。
It seems that jQuery and AngularJs conflict each other. As soon as I include both libraries they do not work correctly anymore. If I include only one of them (AngularJS or Jquery), than that part works.
似乎 jQuery 和 AngularJs 相互冲突。一旦我包含这两个库，它们就不能正常工作了。如果我只包含其中一个（AngularJS 或 Jquery），那么那部分就可以了。
But I don't see where the problem is :...
但我不明白问题出在哪里：...
$(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(Code) part:
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-Part):
AngularJS（HTML 部分）：
<div class="form-horizontal" ng-app="myApp" ng-controller="MyCtrl" ng-init="imageHeight=300;imageWidth=400">
<div class="form-group">
<div class="col-md-12">
<div class="panel-group col-md-12" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<div style="text-align:center">
<button class="btn btn-default" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
<a class="label label-default" style="font-size:large" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="badge"> {{currentpage+1}}/{{numberOfPages()}} ({{filtered.length}} results)</span></a>
<button class="btn btn-default" ng-disabled="currentPage >= filtered.length/pageSize - 1" ng-click="currentPage=currentPage+1">
Next
</button>
</div>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="input-group col-md-4">
<span class="input-group-addon editor-label">search</span>
<input type="text" class="form-control" placeholder="search" ng-model="searchImage">
</div>
<div class="input-group col-md-4">
<span class="input-group-addon editor-label">width</span>
<input type="text" class="form-control" placeholder="width" ng-model="imageWidth">
<span class="input-group-addon">px</span>
</div>
<div class="input-group col-md-4">
<span class="input-group-addon editor-label">height</span>
<input type="text" class="form-control" placeholder="height" ng-model="imageHeight">
<span class="input-group-addon">px</span>
</div>
<br />
<div class="clearfix"></div>
<div class="col-md-4 " ng-repeat="item in filtered = (data | filter: searchImage) | startFrom:currentPage*pageSize | limitTo:pageSize" style="overflow:auto">
<a href="{{item}}" title="{{item}}" target="_blank" class="germanMtg"><img src="~/Pictures/german.png" /></a>
<a href="{{item}}" title="{{item}}" target="_blank" class="englishMtg"><img src="~/Pictures/uk.png" /></a>
<a href="{{item}}" title="{{item}}" target="_blank" class="thumbnail"><img ng-src="{{item}}" class="tumbailImage" height="{{imageHeight}}" width="{{imageWidth}}"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I get this error even if I use jQuery 1.6(only sometimes):
即使我使用 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)
Thank you for helping.
感谢您的帮助。
回答by benrict
jQuery and AngularJS are supposed to work together in a transparent manner. If jQuery is loaded before AngularJS, AngularJS will actually use the available jQuery instead of a "mini" built-in jQuery clone (jqLite).
jQuery 和 AngularJS 应该以透明的方式协同工作。如果 jQuery 在 AngularJS 之前加载，AngularJS 实际上将使用可用的 jQuery 而不是“迷你”内置 jQuery 克隆 (jqLite)。
It is however mentioned in the FAQ (https://docs.angularjs.org/misc/faq) that "Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.". Depending on your version of Angular and jQuery, it may be the cause of your problems.
然而，在 FAQ ( https://docs.angularjs.org/misc/faq) 中提到“Angular 1.3 仅支持 jQuery 2.1 或更高版本。jQuery 1.7 和更新版本可能与 Angular 一起正常工作，但我们不保证。 ”。根据您的 Angular 和 jQuery 版本，这可能是您出现问题的原因。
回答by virender
You should use jquery before angularJs
你应该在 angularJs 之前使用 jquery
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="kendo.all.min.js"></script>
Read this thead
阅读这篇文章
Which is the right way to add Jquery and Angularjs in one project
回答by AngularLover
Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite. Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.
是的，如果在应用程序启动时 jQuery 存在于您的应用程序中，Angular 可以使用它。如果 jQuery 不存在于您的脚本路径中，Angular 会回退到我们称为 jQLite 的 jQuery 子集的它自己的实现。Angular 1.3 仅支持 jQuery 2.1 或更高版本。jQuery 1.7 和更新版本可能与 Angular 一起正常工作，但我们不保证。
I also advise you to use only JQLite.. it has almost the functionalities in Jquery. But if you want to use Jquery and not the Lite version, load the Jquery before the Angular-Script.
我还建议您只使用 JQLite ..它几乎具有 Jquery 中的功能。但是如果您想使用 Jquery 而不是 Lite 版本，请在 Angular-Script 之前加载 Jquery。
回答by Ashiq
Try firebug to catch the error of the JS/JQuery/AJS. firebug is an addon of Mozilla Firefox, you should have installed an updated version of firefox.
尝试使用 firebug 来捕捉 JS/JQuery/AJS 的错误。firebug 是 Mozilla Firefox 的插件，您应该已经安装了更新版本的 firefox。
