用角度控制器从火场获取数据

Question

我是新使用的角度和火基，我试图做一个控制器从数据库中获取数据，然后将其发送到范围，然后在html中使用ng-重复，这是我的代码：

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包装代码设置$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。为了做到这一点，您可以将代码更改为：

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