getJSON und Winkelmodell

Question

Ich bin fest. Irgendwie kann ich das nicht funktionieren. Ich versuche, Daten für eine Web-App aus einer (noch lokalen) JSON-Datei zu laden. Ein Abschnitt dieses JSON enthält Farben und sieht wie folgt aus:

{ 
    "colors" : { 
    "1" : "yellow", 
    "2" : "green", 
    "3" : "red" 
    }, 
    "stuff : {...} 
} 

Ich habe eine sehr einfache HTML-Datei mit einigen Kopf Sachen haben. Scripte werden in die Kopfzeile geladen. Der interessante Teil sieht wie folgt aus:

<ul ng-controller="ColorController"> 
    <li ng-repeat="(key,value) in colors" value="{{key}}"> 
    {{key}}: {{value}} 
    </li> 
</ul> 

Die entsprechende Javascript:

var colors = { 
    "1": "lyellow", 
    "2": "lgreen", 
    "3": "lred" 
}; 

var app = angular.module('test', []); 

app.controller('ColorController', function($scope){ 

    $scope.colors = colors; 

    $.getJSON('data.json') 
     .then(function(res){ 
      $scope.colors = res.colors; 
     }); 
}) 

ich mit einer lokalen Version von Farben zunächst versucht, damit die Variable Farben. Das hat gut funktioniert und die gewünschte Leistung gebracht. Ich habe versucht, zu einem lokal gespeicherten JSON zu wechseln. console.log zeigte eine korrekte Analyse. Auf einer Debug-Konsole Farben und Res.Farben sieht gleich aus. Aber die Liste auf der Seite wird nicht aktualisiert.

Ich denke, es ist etwas mit dem Timing, aber ich bin mir nicht sicher. Könnte mir jemand in die richtige Richtung zeigen?

Answer 1

jQuery getJSON wird Digest-Zyklus außerhalb von Winkel durchgeführt, und die Ansicht wird nicht aktualisiert in dann then Ihres Ajax-Aufrufs. Wenn Sie eine Linie mit $scope.$apply() nach dem $ Umfang variable Zuordnung hinzufügen, würde die Ansicht zu aktualisieren (siehe Plunker: https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview)

Was ich empfehlen, obwohl, ist Winkel nativen $http.get zu verwenden, um die JSON zu erhalten. Siehe Plunker hier zum Beispiel: https://plnkr.co/edit/F7e5ECYbl91mYhF3g848?p=preview

angular.module('test', []) 
.controller('testCtrl', function($scope, $http) { 
    $http.get('colors.json') 
    .then(function(response) { 
    $scope.colors = response.data['colors'] 
    }) 
}) 

Answer 2

Versuchen Sie, den $ timeout verwenden.

wird angular gezwungen, den $ scope zu aktualisieren.