AngularJs观察者为什么会这样

Question

ok I am struggling with this for a while now

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();
 });
});

when the watcher is not fired everything works ok when the watcher is fired I get a lat2.toRad() is not a function (took a while to find that.. in chrome I only got undefined is not a function.. thank you Firebug for being precise) which lead me to suspect something is happening with the

return this*Math.pi/180 

is what I am saying valid? and if someone would point out what I am missing here in terms of Angular or Javascript thank you

Answer 1

I think you need to rethink your logic a little. You have a number of issues in the code that even Plunkr is picking up on, like redefining homePosition in your showDistance method:

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

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

This isn't the root cause of your problem - I'm just calling it out because these warnings are often indications of practices that will get you into trouble in Javascript. Javascript has something called "variable hoisting" that basically means no matter where in your function you define a var, it will actually get defined at the very top, when you enter the function. This can create very unpredictable behavior if you haven't allowed for it, and re-defining a function parameter with a var of the same name is one of those gotchas that trip a lot of people up.

Your root cause could not be simpler, though. In this case the debugger is your friend. I've forked your Plnkr and slightly modified it to add a debugger breakpoint: http://plnkr.co/edit/6amCdnBYqmzlUXVO9buP?p=preview

If you look at your "locals" panel when you hit this point you will see that lat2 is a string. Strings objects don't support math functions - you need to convert it to an int or float first. :)