I wrote code with AngularJs and jQuery. Only one thing works: AngularJs or jQuery.
It seems that jQuery and AngularJs are conflicting with each other. As soon as I turn on both libraries, they work incorrectly. If I include only one of them (AngularJS or JQuery), than this part works.
But I do not 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]);
Part of AngularJS (Code):
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):
<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):
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)
Thanks for the help.