在不同范围内使用变量 angularJs

Question

我在 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);
})

conole.log 给了我一个undefined。我知道这对某些人来说可能是一个显而易见的问题，但我该如何解决这个问题？

编辑

抱歉各位，我不是很清楚：我需要在函数外使用 curPos 变量。一旦它被增强，我需要在控制器的任何地方读取它的值。

Answer 1

navigator.geolocation.getCurrentPosition 是异步的，所以当你的成功函数被执行时，你的 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);
   };


})

Answer 2

我假设 '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'这个值取一次:

一个。 在应用程序启动时 - 然后在 somoe home 控制器或父/抽象控制器中获取此值并将其保存在某个工厂（共享数据服务）中，然后可以从中获取required.
时的任何控制器
b。 在页面加载时 - 然后可以在页面加载之前使用 anguler ui 路由器状态和解析来获取。参考 http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/ 了解更多详情。
如果值需要不时更新 - 在这种情况下，您必须将每个逻辑（使用此变量）移动到成功回调（可以根据逻辑的变化实现多个回调），这样你就可以明确地同步这个场景。

Answer 3

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

这是一个工作示例：

笨蛋：https://plnkr.co/edit/xiv33CunDZrb06PvfFyU

script.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)
          }
      );
    }
});

index.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>

Answer 4

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

Answer 5

我不知道为什么，但我终于通过使用 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);

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

在不同范围内使用变量 angularJs

Using variable in different scope angularJs

javascript

variables

visibility

scope

angularjs