CODEWITHSUNDEEP
angularjscordova
Roxx
Roxx

Reputation: 3986

Angularjs: ReferenceError: function is not defined at Channel.onDeviceReady

This is my second question today. I am using Cordova + angular (1). I am trying to compare two geolocation with the help of distanceInKmBetweenCoordinates function.

I am getting this error while running the app.

angular.min.js:101 ReferenceError: distanceInKmBetweenCoordinates is not defined at Channel.onDeviceReady

Here is the code.

document.addEventListener('deviceready', function onDeviceReady() {
            angular.bootstrap(document, ['formApp']);
        }, false);

        var formApp = angular.module('formApp', []);

// define angular module/app

 var formApp = angular.module('formApp', []);

formApp.controller('formProfile1', function($scope,$http,$location, $timeout){

function degreesToRadians(degrees) {
    return degrees * Math.PI / 180;
}

function distanceInKmBetweenEarthCoordinates(lat1, lon1, lat2, lon2) {
    var earthRadiusKm = 6371;

    var dLat = degreesToRadians(lat2-lat1);
    var dLon = degreesToRadians(lon2-lon1);

    lat1 = degreesToRadians(lat1);
    lat2 = degreesToRadians(lat2);

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return earthRadiusKm * c;
}

I am using Cordova geolocation plugin to get the current location.

navigator.geolocation.getCurrentPosition(function(position) {
                    $scope.userlongitude = position.coords.longitude;

                    $scope.userlatitude = position.coords.latitude;

Below are some ajax request to get the data from the database including geolocation to compare.

$http({
                    url: 'https://www.abcd.xyz/get_info.php',
                    method: "GET",
                    params: {
                        tn_id: $scope.tn_id
                    }
                })
                .success(function(data) {

                    if (data.success) {
                          $scope.longitude = data.longitude;
                          $scope.latitude =  data.latitude;     
                    }
$scope.distance = distanceInKmBetweenCoordinates($scope.userlatitude, $scope.userlongitude, $scope.latitude, $scope.longitude);

In the end, I am comparing the geolocation.

Can you advise me what am I doing wrong? If I just do the compare only in angular then it is showing me correct value but along with Cordova, it is broken.

I also made changes in the body section as follows.

<!--<body id="home" ng-app="formApp"> --> Previous one
  <body id="home">

Edit 1 I changed the code like this.

degreesToRadians = function(degrees) {
        return degrees * Math.PI / 180;
    }

     distanceInKmBetweenEarthCoordinates= function(lat1, lon1, lat2, lon2) {
        var earthRadiusKm = 6371;

        var dLat = degreesToRadians(lat2-lat1);
        var dLon = degreesToRadians(lon2-lon1);

        lat1 = degreesToRadians(lat1);
        lat2 = degreesToRadians(lat2);

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
        return earthRadiusKm * c;
    }

    $scope.distance = distanceInKmBetweenEarthCoordinates(43, 44,44,55);
    alert($scope.distance);

and when I test it is giving me correct value but when I test it like this.

distanceInKmBetweenCoordinates($scope.userlatitude, $scope.userlongitude, 44,55);

then it is giving me the same error.

I used $timeout function to delay the loading but the error is same.

$timeout(function() {
                         $scope.distance = distanceInKmBetweenCoordinates($scope.userlatitude, $scope.userlongitude, 44,55);
                         alert($scope.distance);
                         console.log($scope.distance);

                         }, 5000);

Upvotes: 0

Views: 289

Answers (2)

Eduardo Rosostolato
Eduardo Rosostolato

Reputation: 858

Try to assign the function to a local var in controller scope, maybe it's loosing reference:

formApp.controller('formProfile1', function($scope,$http,$location){

var degreesToRadians = function(degrees) {
  return degrees * Math.PI / 180;
}

var distanceInKmBetweenEarthCoordinates = function(lat1, lon1, lat2, lon2) {
  var earthRadiusKm = 6371;

  var dLat = degreesToRadians(lat2-lat1);
  var dLon = degreesToRadians(lon2-lon1);

  lat1 = degreesToRadians(lat1);
  lat2 = degreesToRadians(lat2);

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * 
    Math.cos(lat2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return earthRadiusKm * c;
}

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

As you suggested, place your code once you get the response from the ajax call,

 if (data.success) {
       $scope.longitude = data.longitude;
       $scope.latitude =  data.latitude;     
       $scope.distance = distanceInKmBetweenCoordinates($scope.userlatitude, $scope.userlongitude, $scope.latitude, $scope.longitude);
 }

Upvotes: 1

Related Questions