Angular.js将数据从异步服务传递到作用域
Angular.js pass data from async service to scope
我有一个类似的服务
app.factory('geolocation', function ($rootScope, cordovaReady) {
return {
getCurrentPosition: cordovaReady(function (onSuccess, onError, options) {
navigator.geolocation.getCurrentPosition(function () {
var that = this,
args = arguments;
if (onSuccess) {
$rootScope.$apply(function () {
onSuccess.apply(that, args);
});
}
}, function () {
var that = this,
args = arguments;
if (onError) {
$rootScope.$apply(function () {
onError.apply(that, args);
});
}
}, options);
}),
getCurrentCity: function (onSuccess, onError) {
this.getCurrentPosition(function (position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(options,function (results, status) {
var city = address_component.long_name;
});
});
}
}
});
我想在控制器上做一些类似的事情
function MainCtrl($scope, geolocation) {
geolocation.getCurrentCity(function(city){
$scope.city = city;
});
};
getCurrentPosition运行良好,城市也已确定,但我不知道如何访问控制器中的城市。
会发生什么当调用getCurrentCity时,它会调用getCurrentPosition来确定gps坐标。这些coords作为参数传递给onSuccess方法,对吗?所以这和我想在getCurrentCity方法中做的完全一样,但我不知道怎么做。异步地理编码器检索到城市后,我想将新数据应用到onSuccess方法中。
有什么想法吗?
您正在处理回调和异步请求。所以你应该使用$q服务。只需在您的服务中注入$rootScope和cordovaReady依赖项即可。并将承诺添加到您的功能中,如
getCurrentCity: function () {
var deferred = $q.defer();
this.getCurrentPosition(function (position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(options,function (results, status) {
var city = address_component.long_name;
$rootScope.$apply(function(){
deferred.resolve(city);
});
});
});
return deferred.promise;
}
在您的控制器中,执行以下操作来处理承诺。
function MainCtrl($scope, geolocation) {
geolocation.getCurrentCity().then(function(result) { //result === city
$scope.city = result;
//do whatever you want. This will be executed once city value is available
});
};
试试这个
function MainCtrl($scope, geolocation) {
$scope.city = null;
geolocation.getCurrentCity(function(city){
$scope.city = city;
if(!$scope.$$phase) {
$scope.$digest($scope);
}
});
};
有时,在初始化控制器时,并不总是调用观察程序,通过强制执行摘要事件,如果范围不在阶段中,我相信你可以去你想去的地方。如果我不理解你的问题,请告诉我。
哦,我不知道我是否正确阅读了代码,但似乎你没有在函数中调用onSuccess回调:将您的getCurrentCity函数替换为:
getCurrentCity: function (onSuccess, onError) {
this.getCurrentPosition(function (position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(options,function (results, status) {
var city = address_component.long_name;
if(typeof onSuccess === 'function') {
onSuccess(city);
}
});
});
}
只需在服务中调用onSuccess方法,而不是在那里处理结果。
getCurrentCity: function (onSuccess, onError) {
this.getCurrentPosition(function (position) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(options, onSuccess);
});
}
在你的控制器中,解析结果并分配城市:
function MainCtrl($scope, geolocation) {
geolocation.getCurrentCity(function(results, status){
// Parse results for the city - not sure what that object looks like
$scope.city = results.city;
});
};
如果我错了,请纠正我,但所提供的解决方案将不再完全工作,因为较新的Angular版本(>1.2!?)不再自动打开$q承诺。
因此:
$scope.city = geolocation.getCurrentCity();
将永远是一个承诺。因此,您必须始终使用:
geolocation.getCurrentCity().then(function(city) {
$scope.city = city;
}
相关文章:
- 监视函数从服务返回不起作用,但作用域函数起作用
- 角度指示ng重复作用域和服务
- 在 AngularJS 中执行作用域函数内的服务后,范围变量不会更新
- 如何以正确的方式从服务中设置作用域变量
- ng show-使用服务作为作用域参数
- 在不使用作用域的情况下,我应该如何引用控制器函数中的服务
- 服务内部的数据更改不会更新作用域
- Angular.js将数据从异步服务传递到作用域
- Angularjs无法将数据服务响应添加到作用域变量
- 如何在AngularJS中将数据从同一服务加载到两个不同的作用域变量
- Angular 2服务单例作用域问题
- angularjs用现有控制器中的REST服务填充作用域变量
- 为什么AngularJS的服务不绑定到作用域?
- AngularJS从服务模型中更新作用域
- 为什么不是我的AngularJS $作用域?$watch在服务变更时被触发
- Angular -在服务url中使用作用域变量
- 调用服务函数:第一次执行时没有填充作用域
- AngularJS:通过服务在两个作用域/控制器之间进行双向通信
- 如何将作用域从服务传递给view
- 将作用域对象传递给可以监视和更新它的服务