Accéder à AngularJS $ scope depuis JQuery .get - jquery, angularjs, internet-explorer-8

J'utilise AngularJS 1.2.26 et JQuery 1.11.2. J’ai besoin de la prise en charge d’IE8. Au lieu d’utiliser $ http.get de AngularJS, j’utilise «$ .get» de JQuery et j’ajouterai l’extension jQuery ajaxTransport pour la prise en charge d'IE8:

{{ testText }} ... var app = angular.module("myApp", ["ui.bootstrap"]); app.controller("appController", function($scope) { $scope.testText = "loading"; $.get("http://www.apicallgoeshere.com").done(function(res) { $scope.testText = "loaded"; }); });

Contrairement à $ http.get, le code ci-dessus ne modifie pas testText en "chargé". Comment mettre à jour le modèle correctement à partir de $ .get?

Réponses:

Comme le commentaire suggéré d'utiliser $ scope. $ apply () va résoudre le problème.

Pourquoi est-ce que ça se passe, angularjs met à jour l'interface utilisateurcomposants via des contrôles, qui ont des méthodes de rappel enregistrées quand une valeur attachée à la portée change. Mais cela ne se produira que lorsque le changement aura lieu au sein d’une méthode angulaire (cycle de digestion). Dans votre cas, vous utilisez jQuery ajax et modifiez la variable scope, mais angularjs n'est pas au courant et l'interface utilisateur n'est pas mise à jour.

Nous utilisons donc le $ appliquer () méthode qui forcera exécuter les montres associées à la portée.

Mais au lieu de cela, vous pouvez utiliser le $ http service fourni par angularjs

var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller("appController", ["$scope", "$http", function ($scope, $http) {
$scope.testText = "loading";
$http.get("http://www.apicallgoeshere.com").success(function (res) {
$scope.testText = "loaded";
});
});