AngularJS + Firebase - 范围在获取远程数据时不更新
AngularJS + Firebase - Scope not updating when getting remote data
我已经研究这个问题大约一个星期了,但没有任何进展。我有一组数据可供我的 $scope
使用。我像这样遍历它:
<div ng-repeat="device in myData">
<label>{{processor(device.$id)}}</label>
</div>
数据仅包含一个 Firebase $uid
。我想向数据库发出第二个请求以获取与此 $uid
关联的信息并将其作为标签的内容。我想我可以使用带有函数的 angular 表达式来传递 Firebase $uid
和 return 一些数据。
我声明这个$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()
运行并有一个回调,当数据被 returned 时,我将它记录到控制台,它运行完美,所有数据都在那里。但是当我尝试 return $scope
的值时,它不会更新。
我已经尝试了所有可用的 Angular/AngularFire 代码组合,但没有任何效果,有什么想法吗?
您的函数未返回任何内容。试试这个:
$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());
})
}
如果作为参数传递给 once
函数的函数是异步执行的,则无法 return 来自 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);
如果该函数不是异步的,您可以 return 使用这样的数据:
$scope.processor = function(uid) {
var data = undefined;
_.child('device/' + uid).once('value', function(snapshot) {
data = snapshot.val()
})
return data
}
reference
检查您的应用程序中是否有同一控制器的多个实例。我犯了同样的错误几次。我让 ngRoute 使用
实例化控制器
app.config(function($routeProvider) {
$routeProvider
.when('/', {
// template : 'NIIIIICE',
templateUrl : 'pages/enquiries.html',
controller : 'firstcontroller'
});
});
然后我错误地在 HTML 中创建了 SAME 控制器的另一个实例,例如:
ng-controller="firstcontroller as fctrl"
当我调用 $apply()
时,它只适用于子实例,这让它看起来好像不起作用....所以长话短说确保你是 运行 $apply 在同一个实例中。 :)
我已经研究这个问题大约一个星期了,但没有任何进展。我有一组数据可供我的 $scope
使用。我像这样遍历它:
<div ng-repeat="device in myData">
<label>{{processor(device.$id)}}</label>
</div>
数据仅包含一个 Firebase $uid
。我想向数据库发出第二个请求以获取与此 $uid
关联的信息并将其作为标签的内容。我想我可以使用带有函数的 angular 表达式来传递 Firebase $uid
和 return 一些数据。
我声明这个$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()
运行并有一个回调,当数据被 returned 时,我将它记录到控制台,它运行完美,所有数据都在那里。但是当我尝试 return $scope
的值时,它不会更新。
我已经尝试了所有可用的 Angular/AngularFire 代码组合,但没有任何效果,有什么想法吗?
您的函数未返回任何内容。试试这个:
$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());
})
}
如果作为参数传递给 once
函数的函数是异步执行的,则无法 return 来自 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);
如果该函数不是异步的,您可以 return 使用这样的数据:
$scope.processor = function(uid) {
var data = undefined;
_.child('device/' + uid).once('value', function(snapshot) {
data = snapshot.val()
})
return data
}
reference
检查您的应用程序中是否有同一控制器的多个实例。我犯了同样的错误几次。我让 ngRoute 使用
实例化控制器app.config(function($routeProvider) {
$routeProvider
.when('/', {
// template : 'NIIIIICE',
templateUrl : 'pages/enquiries.html',
controller : 'firstcontroller'
});
});
然后我错误地在 HTML 中创建了 SAME 控制器的另一个实例,例如:
ng-controller="firstcontroller as fctrl"
当我调用 $apply()
时,它只适用于子实例,这让它看起来好像不起作用....所以长话短说确保你是 运行 $apply 在同一个实例中。 :)