AngularJS e conflitto jQuery

Question

Ho scritto codice con AngularJs e jQuery. Funziona solo una cosa, AngularJs o jQuery.

Sembra che jQuery e AngularJs siano in conflitto tra loro. Non appena includo entrambe le librerie, non funzionano più correttamente. Se includo solo uno di essi (AngularJS o Jquery), quella parte funziona.

Ma non vedo dove sia il problema: ...

$(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 (Codice) parte:

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-Parte):

<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> 

Ottengo questo errore anche io f Uso jQuery 1.6 (solo qualche volta):

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) 

Grazie per l'aiuto.

Answer 1

Prova firebug per rilevare l'errore di JS/JQuery/AJS. firebug è un componente aggiuntivo di Mozilla Firefox, dovresti aver installato una versione aggiornata di firefox.

Answer 2

Sì, Angular può utilizzare jQuery se è presente nell'app quando l'applicazione viene avviata. Se jQuery non è presente nel tuo percorso di script, Angular ricade sulla sua implementazione del sottoinsieme di jQuery che chiamiamo jQLite. Angular 1.3 supporta solo jQuery 2.1 o successivo. jQuery 1.7 e successivi potrebbero funzionare correttamente con Angular, ma non è garantito.

Inoltre, consiglio di utilizzare solo JQLite .. ha quasi le funzionalità in Jquery. Ma se vuoi usare Jquery e non la versione Lite, carica Jquery prima di Angular-Script.

Answer 3

Si dovrebbe usare jQuery prima angularJs

<script src="jquery.min.js"></script> 
<script src="angular.min.js"></script> 
<script src="kendo.all.min.js"></script> 

Leggi questo thead

Which is the right way to add Jquery and Angularjs in one project

Answer 4

jQuery e AngularJS si suppone di lavorare insieme in modo trasparente. Se jQuery viene caricato prima di AngularJS, AngularJS utilizzerà effettivamente la jQuery disponibile invece di un clone jQuery integrato ("jqlite") "mini".

E 'tuttavia menzionato nelle FAQ (https://docs.angularjs.org/misc/faq) che "Angular 1.3 supporta solo jQuery 2.1 o successivo. JQuery 1.7 e successivi potrebbero funzionare correttamente con Angular ma non è garantito.". A seconda della versione di Angular e jQuery, potrebbe essere la causa dei tuoi problemi.