在不同的范围内使用变量 angularJs

我在angularJs中有这个控制器

.controller('MapCtrl', function($scope, $http, $rootScope) {
$scope.mappa={};
var curPos;
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success);
function success(pos) {
var crd = pos.coords;
curPos = crd.latitude;
};
console.log(curPos);
})

锥形.log给了我一个不确定的。我知道这对某人来说可能是一个明显的问题，但我该如何解决这个问题？

编辑

对不起，伙计们，我不太清楚：我需要在函数之外使用 curPos var。一旦它被增强，我需要在控制器中的任何地方读取它的值。

navigator.geolocation.getCurrentPosition是 aysnchronous，所以当你的成功函数被执行时，你的 console.log(curPos) 正在被执行，因此未定义。只需将console.log(curPos)放入您的成功函数中即可。

.controller('MapCtrl', function($scope, $http, $rootScope) {
$scope.mappa={};
var curPos;
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success);
function success(pos) {
var crd = pos.coords;
curPos = crd.latitude;
console.log(curPos);
};

})

使用$scope.$apply在 Angular 框架不处理的异步方法中更新范围。

这是一个工作示例：

普伦克： https://plnkr.co/edit/xiv33CunDZrb06PvfFyU

脚本.js

angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// On success
function(pos) {
console.log(pos)
$scope.$apply(function() {
$scope.coords = pos.coords;
})
}, 
// On error
function(err) {
console.error(err)
}
);
}
});

索引.html

<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<p>
latitude: {{coords.latitude}} <br/>
longitude: {{coords.longitude}} <br/>
</p>
</body>
</html>

由于它是一个异步过程，如果你打印变量而不等待getCurrentPosition的成功，它将是未定义的。您必须在此回调之后(或在其中)打印它。此外，如果您想访问此 var，首先您必须检查它是否定义，如果没有，请等待它。您可以使用角度$timeout和变量在 var 准备就绪时打印控制台。

我假设"getCurrentPosition"是某种服务调用，因此您的成功回调被异步调用(在承诺从服务返回之后)。

因此，将使用"curPos"变量的逻辑移动到成功回调函数。在那里，您将获得"curPos"的更新值。

.controller('MapCtrl', function($scope, $http, $rootScope) {
$scope.mappa = {};
var curPos;
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(success);
function success(pos) {
var crd = pos.coords;
curPos = crd.latitude;
console.log(curPos); // would be a defined value here
// your logic goes here
};
console.log(curPos); // would be undefined as it is being called before the execution of success call back function
})

这也取决于您需要处理的情况。

如果获取一次 'curPos' 值：
a.在应用程序启动时- 然后在 somoe 家庭控制器或父/抽象控制器中获取此值并将其保存在某个工厂(共享数据服务)中，然后可以在需要时从任何控制器获取该值。
b. 在页面加载时 - 然后可以在页面加载之前使用 anguler UI 路由器状态和解析来获取此内容。有关更多详细信息，请参阅 http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/。
如果需要不时更新该值- 在这种情况下，您必须将每个逻辑(使用此变量)移动到成功回调(可以根据逻辑的变化实现多个回调)，这样您将显式同步此场景。

我不知道确切的原因，但我最终通过使用angular.copy使其工作

var curPos = {};
navigator.geolocation.getCurrentPosition(function(pos) {
var tmpPos = {
lat: pos.coords.latitude,
lng: pos.coords.longitude
}
angular.copy(tmpPos, curPos);
});
console.log(curPos);

我不得不将所有使用该变量的代码放在成功函数中。感谢大家:)

相关内容

最新更新

热门标签：