AngularJS + Firebase - 获取远程数据时范围不更新

时间:2017-03-23 18:34:06

标签: javascript angularjs firebase firebase-realtime-database angularfire

我一直在研究这个问题大约一个星期而没有任何进展。我有一系列数据可供$scope使用。我像这样迭代它:

<div ng-repeat="device in myData">
    <label>{{processor(device.$id)}}</label>
</div> 

该数据仅包含Firebase $uid。我想向数据库发出第二个请求,以获取与此$uid相关联的信息,并将其作为标签的内容。我以为我可以使用带有函数的角度表达式传入Firebase $uid并返回一些数据。

我声明了这个$scope函数:

$scope.processor = function(uid) {
     function getDeviceInfo(callback) {
          _.child('device/' + uid).once('value', function(snapshot) {
               callback(snapshot.val())
          })
     }
     getDeviceInfo(function(data) {
          console.log(data)
          return data
     })
}

基本上我在我的范围内调用processor($id),传入我要查找的uid。函数getDeviceInfo()运行并有回调,当返回数据时,我将其记录到控制台,这完美,所有数据都存在。但是当我尝试将值返回$scope时,它不会更新。

我已经尝试过使用Angular / AngularFire代码的所有组合,并且没有任何工作,任何想法?

3 个答案:

答案 0 :(得分:1)

你的功能没有返回任何东西。试试这个:

$scope.processor = function(uid) {
   function getDeviceInfo(callback) {
     _.child('device/' + uid).once('value', function(snapshot) {
       callback(snapshot.val())
     })
   }
   return getDeviceInfo(function(data) {
     console.log(data)
     return data
   })
}

这看起来过于复杂,为什么不这样做呢?

$scope.processor = function(uid) {
  return _.child('device/' + uid).once('value', function(snapshot) {
    return callback(snapshot.val());
  })
}

答案 1 :(得分:1)

如果作为参数传递给once函数的函数是异步执行的,则无法从processor函数返回数据。

您可以做的最好的事情是将结果数据添加到设备对象或创建另一个对象来保存所有设备的所有数据。

试试这个:

<div ng-repeat="device in myData">
    <label>{{device.data}}</label>
</div> 

$scope.processor = function(device) {
   _.child('device/' + device.$id).once('value', function(snapshot) {
           device.data = snapshot.val();
     });
   }
}
$scope.myData.forEach($scope.processor);

或者这个:

<div ng-repeat="device in myData">
    <label>{{deviceData[device.$id]}}</label>
</div> 

$scope.deviceData = {};
$scope.processor = function(device) {
   _.child('device/' + device.$id).once('value', function(snapshot) {
           $scope.deviceData[device.$id] = snapshot.val();
     });
   }
}
$scope.myData.forEach($scope.processor);

如果该函数不是异步,则可以使用以下内容返回数据:

$scope.processor = function(uid) {
    var data = undefined;
    _.child('device/' + uid).once('value', function(snapshot) {
        data = snapshot.val()
    })
    return data
}

reference

答案 2 :(得分:0)

检查应用程序中是否具有同一控制器的多个实例。我几次犯同样的错误。我让ngRoute使用实例化控制器

app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
              //  template : 'NIIIIICE',
                templateUrl : 'pages/enquiries.html',
                controller  : 'firstcontroller'
            });
    });

然后我错误地在HTML中创建了SAME控制器的另一个实例,例如:

ng-controller="firstcontroller as fctrl"

当我调用$apply()时,它仅适用于子实例,这使它看起来似乎不起作用。...长话短说,请确保您在同一实例中运行$ apply 。 :)