getJSON 및 각도 모델

Question

막혔습니다. 어떻게 든 나는이 일을 할 수 없다. 나는 여전히 (여전히 로컬) JSON 파일에서 웹 응용 프로그램에 대한 데이터를로드하려고합니다. 이 JSON의 섹션은 다음과 같이 색상과 모양을 포함

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

좀 헤더 물건 아주 기본적인 HTML 파일이 있습니다. Scipts는 헤더에로드됩니다. 흥미로운 부분은 다음과 같습니다

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

해당 자바 스크립트 :

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은 각도의 다이제스트주기 밖에서 수행되므로보기가 AYax 호출의 then에서 업데이트되지 않습니다.

내가 추천 뭐, 그래도 JSON을 얻기 위해 각도의 기본 $http.get을 사용하는 것입니다 : 당신이 당신의 $ 범위 변수 할당 후 $scope.$apply()과 함께 줄을 추가한다면, 뷰 업데이트 (https://plnkr.co/edit/HLSYl0pI2AZ15qf5T5WM?p=preview 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

$ timeout을 사용해보십시오.

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

$ 범위를 업데이트하려면 각도가 강제 적용됩니다.