javascript - AngularJs 观察者为什么会发生这种情况

Question

好吧，我现在正在为此苦苦挣扎一段时间

http://plnkr.co/edit/AjNTek2EiiAwQUsfP5XQ?p=preview

app.controller('MainCtrl', function($scope, $q, $window) {


function getPosition() {
var deferred = $q.defer();
if ($window.navigator.geolocation) {
  $window.navigator.geolocation.watchPosition(function(position) {
    deferred.resolve(position);
  });
}
return deferred.promise;
}
 $scope.homePosition = {
  coords: {
    latitude: 22,
    longitude: 25
 }
};

 var promise = getPosition();
   $scope.showDistance = function(pos, homePosition) {


var position = {
  lat: pos.coords.latitude,
  lon: pos.coords.longitude
 };

 var homePosition = {
  lat: homePosition.coords.latitude,
  lon: homePosition.coords.longitude
 };
 /** Converts numeric degrees to radians */

function getDistance(lat1, lon1, lat2, lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians
  var dLon = (lon2 - lon1).toRad();
  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
  Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
  Math.sin(dLon / 2) * Math.sin(dLon / 2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  var d = R * c; // Distance in km
   return d;
 }
  if (typeof(Number.prototype.toRad) === "undefined") {
    Number.prototype.toRad = function() {
       return this * Math.PI / 180;
   }
 };
    return getDistance(position.lat, position.lon, homePosition.lat, homePosition.lon);
 };
   $scope.s = function() {
   $scope.$watch(function() {
     return $scope.homePosition.coords.latitude;
   }, function(newValue, oldValue) {
  if (newValue) {
    $scope.distance = $scope.showDistance($scope.position, $scope.homePosition);
   }
 })
}
 promise.then(function(position) {
    $scope.position = position;
    $scope.distance = $scope.showDistance(position, $scope.homePosition);
    $scope.s();
 });
});

当观察程序没有被触发时，一切正常当观察程序被触发时，我得到一个 lat2.toRad() 不是一个函数(花了一段时间才发现..在 chrome 中我只得到了 undefined is not a function..谢谢 Firebug 的准确)这让我怀疑

return this*Math.pi/180 

我说的有道理吗？如果有人指出我在 Angular 或 Javascript 方面缺少什么谢谢

Answer 1

我认为你需要重新考虑一下你的逻辑。您的代码中存在许多问题，甚至 Plunkr 也发现了这些问题，例如在 showDistance 方法中重新定义 homePosition:

...
$scope.showDistance = function(pos, homePosition) {
    ...

    // Here we define a new variable with the same name as our function's 2nd param
    var homePosition = {
        ...

这不是您问题的根本原因 - 我只是将其指出，因为这些警告通常表明会给您带来 Javascript 麻烦的做法。 JavaScript 有一种叫做“变量提升”的东西，基本上意味着无论您在函数中的哪个位置定义 var，当您进入函数时，它实际上都会在最顶部定义。如果您不允许的话，这可能会产生非常不可预测的行为，并且使用同名的 var 重新定义函数参数是让很多人陷入困境的陷阱之一。

不过，你的根本原因再简单不过了。在这种情况下，调试器就是你的 friend 。我已经 fork 了你的 Plnkr 并稍微修改了它以添加调试器断点: http://plnkr.co/edit/6amCdnBYqmzlUXVO9buP?p=preview

如果您在到达此点时查看“locals”面板，您将看到 lat2 是一个字符串。字符串对象不支持数学函数 - 您需要先将其转换为 int 或 float。 :)