Comment mettre à jour la variable scope en dehors d'une XMLHttprequest

Question

J'essaie d'obtenir le contenu d'un fichier css en essayant de le stocker dans une variable que je vais utiliser plus tard. J'utilise XMLHttprequest pour obtenir le contenu du fichier. Lorsque j'ai essayé de mettre la console à l'intérieur du onreadystatechange, la sortie arrive parfaitement, mais quand j'essayais la même chose à l'extérieur, elle affichait un résultat vide dans la variable.J'ai entendu parler de $ apply et d'autres choses, mais existe-t-il que cela se produise, où vais-je tort? ... Merci à l'avance ... Voici le code

$scope.files={}; 
    var client = new XMLHttpRequest(); 
    client.open('GET', '/your_css/bootstrap.css'); 
    client.onreadystatechange = function() 
    { 
     var bootstrap=client.responseText; 
     css.file("bootstrap.css",bootstrap); 
     $scope.$applyAsync(function(){ 
      $scope.files.bootstrap=bootstrap; 
     }) 
    } 
    client.send(); 

Answer 1

la raison du comportement que vous venez de décrire est que onreadystatechange n'est pas exécuté, juste d défini. client.send() envoie une demande pour extraire un fichier et onreadystatechange n'est exécutée que lorsque la réponse (et le fichier) est arrivée au navigateur. "Après" onreadystatechange est seulement positionnellement après, mais en termes de temps il est avant cela. onreadystatechange est un callback. Vous vouliez que votre asynchronous request se comporte de manière synchrone, mais c'est une mauvaise idée et un mauvais design. Je vous recommande de vous habituer aux requêtes asynchrones, car attendre qu'une requête soit finie côté client est une mauvaise idée et cela devient pire si vous avez plusieurs requêtes, toutes exécutées de manière synchrone. Cela nuirait vraiment à la performance.

Answer 2

Utilisez le AngularJS $http Service qui enveloppe le XHR API et est intégré dans le cadre de AngularJS:

$http.get('/your_css/bootstrap.css').then(function (response) { 
    $scope.files.bootstrap = response.data; 
});