AngularJS和jQuery冲突 [英] AngularJS and jQuery conflict
问题描述
我用AngularJs和jQuery编写了一些代码. AngularJs或jQuery只有一件事有用.
I wrote some code with AngularJs and jQuery. Only one thing works, either AngularJs or jQuery.
似乎jQuery和AngularJs相互冲突.当我同时包含这两个库时，它们将无法正常工作.如果我仅包括其中一个(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.
但是我看不出问题出在哪里......
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(代码)部分:
AngularJS(Code) part:
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部件):
AngularJS(HTML-Part):
<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>
即使我使用jQuery 1.6(仅有时)，也会出现此错误:
I get this error even if I use jQuery 1.6(only sometimes):
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)
感谢您的帮助.
推荐答案
jQuery和AngularJS应该以透明的方式一起工作.如果jQuery在AngularJS之前加载，则AngularJS实际上将使用可用的jQuery，而不是迷你"内置jQuery克隆(jqLite).
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).
不过，在常见问题解答( https://docs.angularjs.org/misc/faq )中提到"Angular 1.3仅支持jQuery 2.1或更高版本.jQuery1.7和更高版本可能与Angular一起正常工作，但我们不保证.根据您的Angular和jQuery版本，这可能是导致问题的原因.
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.
这篇关于AngularJS和jQuery冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
