Firebase实时数据库返回值无法在AngularJS页面渲染的问题

嗨，这个问题我之前踩过一模一样的坑！核心原因是AngularJS的脏检查机制没捕获到$scope.pps的更新——Firebase的异步回调是在Angular的上下文之外执行的，所以即使你已经给$scope.pps赋了值，Angular也不知道要重新渲染页面；而console.log能正常输出，是因为变量确实已经被修改了，只是视图没同步而已。

具体修复方案 #

你有几个简单的解决办法，选一个适合你的就行：

1. 用$scope.$apply()手动触发脏检查 #

把更新$scope的逻辑包在$scope.$apply()里，强制Angular执行digest循环，检测变量变化：

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
  $scope.$apply(function() {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
  });
  console.log($scope.pps);
});

2. 用$timeout自动触发脏检查 #

如果你觉得$apply写起来繁琐，可以用Angular的$timeout服务（记得先在控制器里注入$timeout依赖），它会自动在回调结束后触发digest循环：

// 先在控制器里注入$timeout，比如：
// app.controller('YourCtrl', ['$scope', '$timeout', function($scope, $timeout) { ... }])

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
  $timeout(function() {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
  });
  console.log($scope.pps);
});

3. 推荐：使用AngularFire（官方适配库） #

如果你的项目会频繁和Firebase交互，建议直接用AngularFire——这是Firebase官方为AngularJS做的适配库，会自动把Firebase的异步操作和Angular的digest循环绑定，不用再手动处理这类同步问题。比如用$firebaseObject获取数据，变量更新会自动同步到视图：

// 先引入AngularFire并注入到你的Angular模块
var ref = firebase.database().ref('/activeUsers/9791009080');
$scope.user = $firebaseObject(ref);
// 然后在视图里可以直接写：{{ user.msisdn || 'Anonymous' }}

总结 #

本质就是Angular无法感知到Angular上下文以外的异步操作带来的变量变化，所以要么手动触发脏检查，要么用官方适配库自动处理同步逻辑。

内容的提问来源于stack exchange，提问作者Pyae Phyoe Shein