AngularJS和jQuery冲突
我用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-部分):
<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>
我得到这个错误,即使我f我使用jQuery 1.6(仅有时):
Error: $scope.filtered is undefined MyCtrl/[email protected]://localhost:5891/Scripts/Angular/JSONMtgs/jsonAngularJs.js:26200:9 _functionCall/<@http://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:6193:13 $interpolate/[email protected]://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:4810:22 $RootScopeProvider/this.$get</[email protected]://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:7720:32 $RootScopeProvider/this.$get</[email protected]://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 [email protected]://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:2802:1 [email protected]://localhost:5891/Scripts/Angular/Source/angular_1_0_3.js:928:1 [email protected]://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/[email protected]://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3048:10 jQuery.Callbacks/[email protected]://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:3160:7 [email protected]://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:433:1 [email protected]://localhost:5891/Scripts/Jquery/jquery-1.10.2.js:104:4
return logFn.apply(console, args);
angular_1_0_3.js (Zeile 5582)
谢谢你的帮助。
尝试使用firebug来捕获JS/JQuery/AJS的错误。 firebug是Mozilla Firefox的插件,你应该已经安装了Firefox的更新版本。
更新我的ansewer – user254197 2015-01-23 10:56:10
是的,如果应用程序正在引导时,Angular可以使用jQuery。如果脚本路径中没有jQuery,则Angular会回退到我们称之为jQLite的jQuery子集的自身实现。 Angular 1.3只支持jQuery 2.1或更高版本。 jQuery 1.7和更新版本可能会与Angular正常工作,但我们不能保证。
我也建议你只使用JQLite ..它具有几乎Jquery中的功能。但是,如果您想使用Jquery而不是Lite版本,请在Angular-Script之前加载Jquery。
你应该使用jquery angularJs前
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="kendo.all.min.js"></script>
阅读本THEAD
Which is the right way to add Jquery and Angularjs in one project
jQuery和AngularJS都应该以透明的方式一起工作。如果jQuery在AngularJS之前加载,AngularJS实际上将使用可用的jQuery而不是“迷你”内置jQuery克隆(jqLite)。
然而,在常见问题解答(https://docs.angularjs.org/misc/faq)中提到“Angular 1.3只支持jQuery 2.1或更高版本,jQuery 1.7和更新版本可能与Angular正常工作,但我们不保证。”。根据你的Angular和jQuery版本,这可能是你问题的原因。
您需要在加载AngularJS之前加载JQuery。 – 2015-01-21 10:27:39
我知道,但比AngularJS不再真的工作(只有jQuery的一部分)... – user254197 2015-01-21 10:29:02
发表您的其他代码:完整的html页面... – Nathan 2015-01-21 10:29:09