在不同范围的angularJs中使用变量答案

【问题标题】：Using variable in different scope angularJs在不同范围的angularJs中使用变量
【发布时间】：2017-03-21 13:18:16
【问题描述】：

我在 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 给了我一个未定义的。我知道这对某人来说可能是一个显而易见的问题，但我该如何解决呢？

编辑

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

【问题讨论】：

由于您使用的是异步函数，因此您无法像以前那样打印curPos。参考return response from async call
How do I return the response from an asynchronous call?的可能重复

标签： javascript angularjs variables scope visibility

【解决方案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);
   };


})

【讨论】：

非常感谢，但我需要在控制器的任何地方使用curPos，而不仅仅是在成功函数中:(

【解决方案2】：

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

这是一个工作示例：

Plunker：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>

【讨论】：

这是一个工作示例（我也更新了我的答案）：plnkr.co/edit/xiv33CunDZrb06PvfFyU

【解决方案3】：

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

【讨论】：

【解决方案4】：

我假设“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 主控制器或父/抽象控制器中获取此值并将其保存在某个工厂（共享数据服务）中，然后可以从任何控制器在需要时。

b. 在页面加载时 - 然后可以在页面加载之前使用 anguler ui 路由器状态和解析来获取它。详情请参考http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/。
如果需要不时更新值 - 在这种情况下，您必须将每个逻辑（使用此变量）移动到成功回调（可以实现多个回调取决于逻辑的变化），这样你就可以显式地同步这个场景。

【讨论】：

和上一条评论一样，我需要知道curPos的值不仅仅是在成功函数中，而是在控制器中的任何地方:(
@DavidePisanò - 请查看我对这个答案的更新版本。

【解决方案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 的代码放在成功函数中。谢谢大家:)

【讨论】：