Question

im new使用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查看我收到的内容，当它在内部时：＆＃39;它有效，它打印我在数据库上的数据，但是当它在外面时：＆＃39;它打印未定义，因此在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（在我认为的最后一年内），您可以使用promises而不是回调。这允许您使用$q.$when来使角度触发摘要，而不是$scope.apply。为此，您可以将代码更改为：

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

使用角度控制器从firebase获取数据

1 个答案: