Ho problemi ad aggiornare il mio ambito sul front-end mentre faccio una richiesta ad un'API. Sul backend posso vedere che il valore della mia variabile $ scope sta cambiando, ma questo non si riflette nelle viste.AngularJS Scope non si sta aggiornando in vista dopo chiamata asincrona
Ecco il mio controller.
Controllers.controller('searchCtrl',
function($scope, $http, $timeout) {
$scope.$watch('search', function() {
fetch();
});
$scope.search = "Sherlock Holmes";
function fetch(){
var query = "http://api.com/v2/search?q=" + $scope.search + "&key=[API KEY]&format=json";
$timeout(function(){
$http.get(query)
.then(function(response){
$scope.beers = response.data;
console.log($scope.beers);
});
});
}
});
Ecco un frammento del mio html
<div ng-if="!beers">
Loading results...
</div>
<p>Beers: {{beers}}</p>
<div ng-if="beers.status==='success'">
<div class='row'>
<div class='col-xs-8 .col-lg-8' ng-repeat="beer in beers.data track by $index" ng-if="beer.style">
<h2>{{beer.name}}</h2>
<p>{{beer.style.description}}</p>
<hr>
</div>
</div>
</div>
<div ng-if="beers.status==='failure'">
<p>No results found.</p>
</div>
Ho provato diverse soluzioni, tra cui utilizzando $ portata applicano $().; ma questo solo crea l'errore comune
Error: $digest already in progress
Il seguente post suggerisce di utilizzare $ timeout o $ asyncDefault AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
Il codice che ho sopra usa $ timeout e non ho nessun errore, ma ancora il la vista non si sta aggiornando.
aiuto apprezzato
Non dovresti aver bisogno del 'timeout' -' $ http' attiverà un ciclo '$ digest' - sei sicuro che i dati tornino? – tymeJV
aggiungere un gestore errori alla richiesta. Controlla anche la rete degli strumenti di sviluppo per assicurarti che la richiesta abbia esito positivo e restituisca quanto previsto. Sembra un problema ajax – charlietfl
Concordato che non è necessario un timeout per questo codice e che $ http dovrebbe innescare un ciclo di digest. Il tuo console.log all'interno della risposta $ http mostra $ scope.beers aggiornato? –