使用 angular 个控制器从 firebase 获取数据

Question

我是新人，使用 angular 和 firebase，我正在尝试制作一个控制器以从数据库中获取数据，然后将其发送到范围内，然后在 html 中使用 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 查看我收到的内容，当它是 'inside: ' 它工作时，它打印我在数据库中的数据，但是当它是 'outside: ' 它打印未定义，所以在 html 中它也是未定义的。

你能帮帮我吗！谢谢！

Answer 1

在 Firebase 的 on('value', [callback]) 事件中设置 $scope 时，不会触发

Angular 的变更检测。您可以通过使用 $scope.$apply 包装您的代码设置 $scope 变量来解决此问题，如下所示：

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 让 angular 触发摘要，而不是 $scope.apply。为此，您需要将代码更改为：

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

使用 angular 个控制器从 firebase 获取数据

Using angular controllers to get data from firebase

controllers

angularjs

firebase

angularfire

firebase-realtime-database