각도 컨트롤러를 사용하여 Firebase에서 데이터 가져 오기

Question

각도와 firebase를 사용하여 새로운 데이터를 가져 와서 데이터베이스에서 데이터를 가져 와서 범위로 보낸 다음 ng-repeat를 사용하여 컨트롤러로 보내려고합니다. 이 예에서

var todoApp = angular.module('todoApp', ['todoApp.controllers','ui.router','firebase']); 

todoApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     .state('home', { 
      url: '/home', 
      templateUrl: 'templates/home.html' 
     }); 

}); 

var todoControllers = angular.module('todoApp.controllers', ['firebase']); 

todoControllers.controller('homeCtrl',function($scope){ 

     db.ref("imagenes").on('value', function (snapshot) { 

     //asignamos a la variable del controlador 
     $scope.imagenes = snapshot.val(); 
     console.log('inside: ' +$scope.imagenes); 

    }); 

    console.log('outside: '+$scope.imagenes); 

}); 

<!-- AngularJS --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 

    <!-- Firebase --> 
    <script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script> 

    <!-- AngularFire --> 
    <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script> 

이 때, 내가, 내가받을 것을 볼 CONSOLE.LOG을 사용하고 있습니다 : 내 코드는 '내부는'그것은 그것이 내가 데이터베이스에있는 데이터를 인쇄, 작동하지만 때 그것은 '외부 :'입니다. 즉, 정의되지 않은 것을 인쇄합니다. 따라서 HTML에서도 정의되지 않았습니다.

도와주세요. 감사합니다.

Answer 1

$ scope가 Firebase의 on('value', [callback]) 이벤트 내에 설정되면 각도 변화 감지가 트리거되지 않습니다. 이 같은 $scope.$apply로 $ 범위 변수를 설정하는 코드를 래핑하여이 문제를 해결 할 수 있습니다

db.ref("imagenes").on('value', function (snapshot) { 
    //asignamos a la variable del controlador 
    $scope.$apply(function(){ 
     $scope.imagenes = snapshot.val(); 
    }); 
}); 

당신이 .on('value', [callback])를 사용하여 실제로 이벤트 리스너를 등록하는, 그래서 때마다 그것을 인식하지 못하는 경우에도주의 참조 된 객체가 Firebase (또는 임의의 자식 객체)에서 변경되면 콜백이 호출됩니다. 이는 의도적 일 수 있지만 데이터를 한 번만 검색하려는 경우 once('value', [callback])을 대신 사용해야합니다.

Firebase의 최신 버전을 사용하고 있다면 (믿을 작년 안에), 콜백 대신 약속을 사용할 수 있습니다. 따라서 $q.$when을 사용하여 $scope.apply 대신 각도 트리거를 다이제스트로 사용할 수 있습니다. 이렇게하려면 코드를 다음으로 변경하십시오.