설정 $ 범위 속성 배열

Question

내가 처음으로 각도 응용 프로그램을 구축하기 위해 노력하고있어 이상 반복을 통해 값이에 문제를 갖는

(function() { 

var ItemController = function($scope, $routeParams, $log, foodFactory) { 
    var foodId = $routeParams.foodId; 
    $scope.food = []; 
    $scope.item; 

    function init() { 
     foodFactory.getFoods() 
      .success(function(foods) { 
       $scope.food = foods; 
      }) 
      .error(function(data, status, headers, config) { 
       //handle error 
      }); 
    } 

    init(); 

    for (var i = 0, len = $scope.food.length; i < len; i++) { 
     if (foodId == $scope.food[i].id) { 
      $scope.item = $scope.food[i]; 
     } 
    } 

}; 
angular.module('paleoApp') 
    .controller('ItemController', ['$scope', '$routeParams', '$log', 'foodFactory', ItemController]); 

})(); 

코드는 제대로 개체의 배열에 $ scope.food을 설정 foodFactory에 의해 JSON 파일에서 가져 왔으며 {{food}}를 사용할 때보기에도 배열이 제대로 표시됩니다. 배열 내에서 적절한 객체를 얻기 위해 $ scope.food를 반복하여 foodId와 일치하는 'id'속성을 가진 객체를 찾아 $ scope.item에 객체를 할당하려고했습니다. 그러나보기에는 {{item}}에 대한 내용이 표시되지 않습니다.

내가 뭘 잘못하고 있니?

감사합니다.

Answer 1

init 메서드에서 getFoods() 호출은 비동기로 표시되지만 호출 완료 전에 $scope.food을 반복합니다. 다음과 같은 일을 할 수 있어야한다 :

var ItemController = function($scope, $routeParams, $log, foodFactory) { 
    var foodId = $routeParams.foodId; 
    $scope.food = []; 
    $scope.item; 

    function init() { 
     return foodFactory.getFoods() 
      .success(function(foods) { 
       $scope.food = foods; 
      }) 
      .error(function(data, status, headers, config) { 
       //handle error 
      }); 
    } 

    init().then(function() { 
     for (var i = 0, len = $scope.food.length; i < len; i++) { 
      if (foodId == $scope.food[i].id) { 
       $scope.item = $scope.food[i]; 
      } 
     } 
    }); 
}; 

은 당신이 여기에있는 것은 init 메소드는 약속을 반환합니다. init().then에 전화 할 때 목록에있는 음식 항목을 찾기 전에 $scope.food = foods; 명이 실행될 때까지 기다립니다.