getJSONと角型モデル

Question

私は立ち往生しています。どういうわけか私はこれを得ることができません。私は（まだ地元の）JSONファイルからweb-appのデータを読み込もうとしています。このJSONのセクションには、色が含まれており、次のようになります。私はいくつかのヘッダのものと非常に基本的なHTMLファイルを持っている

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

。 Sciptsはヘッダーにロードされます。興味深い部分は次のようになります。

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

対応する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; 
     }); 
}) 

は、私が最初に色のローカルバージョンを試してみました、したがって、変数色。それがうまくいき、望ましい出力が得られました。私は、ローカルのストアドJSONに切り替えることを試みた。 console.logは正しい解析を示しました。デバッグコンソールでの色はとです。res.colorsは同じように見えます。しかし、ページのリストは更新されません。

私はそれがタイミングのあるものだと思いますが、わかりません。誰かが正しい方向に私を指摘することができますか？

Answer 1

jQueryのgetJSONは角度のダイジェストサイクル外で実行されるため、ajax呼び出しのthenではビューが更新されません。

私はお勧め何か、しかし、JSONを取得するために、角のネイティブ$http.getを使用することです：あなたは$スコープ変数の割り当て後$scope.$apply()の行を追加した場合、ビューは更新（https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview plunkerを参照）です。例えば、ここでplunkerを参照してください：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

$タイムアウトを使用してみてください。

.then(function(res){ 
    $timeout(function (res) { 
    // your code 
    }, 0); 
}) 

$スコープを更新するように角度を強制します。