Utiliser des contrôleurs angulaires pour obtenir des données de firebase

Question

im new en utilisant angulaire et firebase et j'essaie de faire un contrôleur pour obtenir des données de la base de données, puis l'envoyer dans la portée, puis dans le html utiliser la ng-repeat, cette est mon code:

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> 

dans cet exemple, j'utilise console.log pour voir ce que je reçois, quand il est « à l'intérieur: » il fonctionne, il imprime les données que j'ai sur la base de données, mais quand il est 'outside:' il imprime indéfini, donc dans le html il est indéfini aussi.

Pouvez-vous s'il vous plaît aidez-moi! Merci!

Answer 1

La détection des modifications d'Angular n'est pas déclenchée lorsque $ scope est défini dans l'événement on('value', [callback]) de Firebase. Vous pouvez résoudre ce problème en enroulant votre code définissant la variable de portée de $ avec $scope.$apply, comme ceci:

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

Notez également, si vous n'êtes pas au courant, que l'utilisation .on('value', [callback]) enregistre effectivement un écouteur d'événement, donc à chaque fois l'objet référencé est modifié dans Firebase (ou tout objet enfant), votre callback est appelé. Cela peut être intentionnel, mais si vous souhaitez que vos données soient récupérées une seule fois, vous devez utiliser once('value', [callback]) à la place.

De même, si vous utilisez une version plus récente de Firebase (au cours de la dernière année, je crois), vous pouvez utiliser des promesses plutôt que des rappels. Cela vous permet d'utiliser $q.$when pour avoir un signal de déclenchement angulaire, au lieu de $scope.apply. Pour ce faire, vous devez changer votre code à ceci:

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