반환 된 Firebase 데이터를 AngularJS의 $ scope 변수로 설정하려면 어떻게해야합니까?

Question

것은 내가 할 노력하고 무엇 :

가 내 홈 페이지에 출력이 책 노드에있는 모든 책을 원한다. 필요한 것은 북 노드의 모든 책을 포함하는 배열로 AngularJs에서 ng-repeat 지시문을 사용하여 반복 할 수 있습니다. 아래 코드에서, 데이터를 로그 할 때 ng-repeat와 함께 사용할 수없는 객체 객체를 얻습니다. 또 다른 문제점은 $ scope.allBooks 변수를 페이지에 출력하려고 시도 할 때 아무것도 나타나지 않는 것입니다. 아무도 이것으로 나를 도울 수 있습니까? 당신이 angularfire 당신은 업데이트를 실행하는 각 노하우를하도록해야합니다 사용하지 않으려는 경우 https://firebase.google.com/docs/

// Main Controller 
firebase.database().ref('books').on('value', function(snapshot) { 
    var data = snapshot.val(); 

    $scope.allBooks = data; 
    console.log(data); 
}); 


// Book Node in Firebase 
books : { 
    id : { 
     title: 'The Hunger Games', 
     author: 'Suzanne' 
    }, 
    id : { 
     title: 'Harry Potter and the Order of the Phoenix', 
     author: 'J.K.' 
    } 
} 

Answer 1

을 Angularfire하지 자바 스크립트 SDK를 사용하여

.

// Main Controller 
firebase.database().ref('books').on('value', function(snapshot) { 
    var data = snapshot.val(); 

    $scope.allBooks = data; 
    console.log(data); 
    $scope.$apply(); 
}); 

그냥 각도 노하우가 업데이트 할 수 있도록하기 위해 $scope.$apply()에 추가 할 수 있습니다.

Answer 2

적절한 구문을 사용하여 객체에 ng-repeat의 객체를 사용할 수 있습니다. 자세한 내용은 ng-repeat documentation page에서 설명합니다. 예를 들어

:

는

<div ng-repeat="(key, value) in myObj"> ... </div> 

하지만이 항목의 순서를 깰 것이다, 그래서 확실히 권장되는 방법이 아닙니다. 대신 적절한 순서로 자식을 반복하고 배열을 직접 빌드하려면 forEach 메서드를 사용해야합니다.

---

Firebase JS SDK를 직접 사용하는 경우 Angular는 데이터 변경 사항에 대한 알림을받지 않습니다. 다이제스트주기를 수동으로 트리거해야 범위를 다시 평가할 수 있습니다.

하나의 방법은 범위 조작을 래핑하기 위해 $ timeout을 사용하는 것입니다. 이것은 old Firebase documentation에서 모범 사례로 지명되었습니다.

// Main Controller 
    firebase.database().ref('books').on('value', function(snapshot) { 
     var data = snapshot.val(); 
     console.log(data); 
     $timeout(function() { 
      $scope.allBooks = data; 
     }); 
    });