AngularJS und jQuery Alarm

Question

Ich bin nur neugierig, warum der folgende Code funktioniert:

<script> 
    var app = angular.module('VEL',[]); 
    app.controller('VELControl', function($scope, $http) { 
     $.getJSON("../json/dict.php?p="+$_GET['p'], function(response){ 
     $scope.velData = response; 
    }); 
    alert($scope.velData); // also works with alert($scope); 
    }); 

Aber wenn ich den Alarm (...) entfernen Sie es nicht mehr funktioniert.

Kann mir jemand erklären, warum oder auf eine Dokumentation verweisen?

Answer 1

Das Hauptproblem ist, dass Sie die $.getJSON() Methode von jQuery verwenden, über die Angular nichts weiß. Angular eignet sich hervorragend zum Verfolgen von asynchronen Ereignissen und zum Aktualisieren der Ansicht, wenn sie abgeschlossen sind. Sie müssen jedoch Angulars Dienste verwenden, um dies zu nutzen.

Angular gibt uns den $http Service für AJAX-Anrufe. Da $http in Angulars Digest-Zyklus eingebunden ist (lesen Sie dies, wenn Sie noch nie davon gehört haben, ist es wichtig zu verstehen, wie Angular funktioniert), wird Angular die Ansicht aktualisieren, nachdem $http Daten zurückgibt und die Callbacks ausgeführt werden.

Ihre Controller wie diese Rewrite und es sollte funktionieren:

app.controller('VELControl', function($scope, $http) { 
    $http.get("../json/dict.php?p="+$_GET['p']).then(function(response){ 
     $scope.velData = response.data; 
    }); 
}); 

Als beiseite, Ihre alert() mit der alten Methode arbeitet wahrscheinlich eine Flunke basierend darauf, wie schnell Ihr Server die Daten zurückgegeben. Wie ich es verstehe, alert() läuft sowieso asynchron, so wenn Sie alert($scope.velData) aufgerufen haben, wurde dies wahrscheinlich auf das Ende der Ausführungswarteschlange des Browsers geschoben, und bevor es erreicht wurde der AJAX-Aufruf zurückgegeben und den Wert, den Sie benötigten. Wenn Ihr Server langsamer gewesen wäre, hätten Sie wahrscheinlich undefined und alarmiert, dann Ihre Daten erhalten. Wenn Sie die Kontrolle über den Server haben (was so aussieht), wäre dies wahrscheinlich ein lustiges Experiment, um es zu versuchen: Setzen Sie eine sleep(10) oder eine ähnliche Wartezeit ein, um den Server zu zwingen, eine lange Zeit zu benötigen; versuchen Sie verschiedene Werte und sehen Sie, was mit der alert() Anweisung passiert.