2017-05-28 3 views
0

Ich sah andere Fragen dazu aber hat mir nicht geholfen.Unendliche Schleife von http Anfragen in angularjs

Ich habe Funktion in AngularJS Controller:

$scope.getUser = function(id){ 
    ret = null; 
    $http.get('services/rest/users/' + id).then(
     function(response){ 
      ret = response.data.name; 
     }, 
     function(response){ 
     } 
    ) 
     return ret; 
} 

Und ich rufe diese Funktion in html:

<div ng-repeat = "move in moves">Player:<span> {{getUser(move.player_id)}} </span> - {{move.guess}} - {{move.answer}}</div> 

Und das schafft Endlosschleife von 'services/rest/users/' + id Anfragen. Ich habe gesehen, dass eckig dies tun kann, wenn sich ein Objekt im Umfang ständig ändert, aber ich sehe das hier nicht.

+0

Ist das nicht es aufgrund des Digest-Zyklus immer wieder aufgerufen wird, wenn Ihre eine Anfrage (Backend) abgeschlossen ist? Das kann die ng-repeat-Anweisung erneut aufrufen. –

+2

Zuerst machen Sie den Benutzer ein Versprechen mit $ q und lösen Sie wenn Antwort oder ablehnen, wenn Fehler. Zweitens ist es eine schlechte Übung, mehrere http-Anfragen in ng-repeat aufzurufen. Bringen Sie Ihre Daten in eine Anfrage, wenn Sie können und wenn die Daten bereit sind, füllen Sie ein Array, das an die Bewegungsbereichsvariable gebunden ist. –

+1

Es läuft sogar ohne 'ng-repeat'. Ich habe diese Funktion von einem anderen Ort aus aufgerufen und es begann erneut zu loopen. Versuche es mit '$ q'. – wdc

Antwort

3

Ansatz ist alles falsch.

$http ist asynchron und ret wird immer null sein, wenn sie von getUser()

Niemals Funktionen in Sicht zurückgegeben, die direkt asynchrone Anfragen stellen.

Stattdessen in Controller (oder besser noch in Betrieb ist) iterieren alle moves, Anfrage Spielerdaten und fügen hinzu, dass als Eigentum des move

function getUser(id) { 
    return $http.get('services/rest/users/' + id).then(function(response) { 
    return response.data.name; 
    }).catch(function() { 
    return 'Unknown Player'; 
    }) 
} 


angular.forEach($scope.moves, function(move){ 
    getUser(move.player_id).then(function(player){ 
     move.player = player; 
    }); 
}); 

Ausblick:

<div ng-repeat = "move in moves">Player:<span> {{move.player)}} </span>...</div>