how to turn a function into angular scope function

Question

i've a code like below for calculate distance between two points, this is a code for my ionic project. i used Angularjs-google-maps by allenhwkim, and i want to turn the code into angular scope function so it can run on my View. by the way i get this code from my last question in this forum.

for calculate the distance :

var calcRoute = function(origin,destination,cb) {
        var dist;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
      var request = {
        origin:origin,
        destination:destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
          cb(null, response.routes[0].legs[0].distance.value / 1000);
        }
        else {
          cb('pass error information');
        }
      });
    };

code below for running the function and hold the result in $scope.A so i can call the result by typing {{A}} on my View

calcRoute("-7.048443, 110.441022","-7.048264, 110.440388", function (err, dist) {
    if (!err) {
      $scope.A = dist;
    }
});

the problem is, i just can use the function inside my controller and send the result with $scope, but how to turn the code for example to {{ calc(ori,dest) }} and return the distance in my View.

i've tried to do like this :

    $scope.calc = function(ori,dest){

    var calcRoute = function(origin,destination,cb) {
        var dist;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
      var request = {
        origin:origin,
        destination:destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
          cb(null, response.routes[0].legs[0].distance.value / 1000);
        }
        else {
          cb('pass error information');
        }
      });
    };


    calcRoute(ori,dest, function (err, dist) {
        if (!err) {
          return dist;
        }else{
                console.log("failed");
            }
    });
    return calcRoute();
};

and call the function inside my View like this :

{{calc("-7.048443, 110.441022","-7.048264, 110.440388")}}

it's not working, return undefined and show console error below :

Error: [$interpolate:interr] Can't interpolate: 
  {{calc("-7.048443, 110.441022","-7.048264, 110.440388")}}

InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object

hope anyone can help me,thanks :))

score 0 · Answer 1 · answered Jun 23 '15 at 16:17

0

Not sure you can compute the function on the fly and print the return value.

What you can do is:

Bind your function to a scope function $scope.calc = function(x,y){...}
inside do the usual assignment $scope.A = dist .
In the view just print {{A}}.
To call the function simply use calc(ori,dest). (from your code I didn't get where you should call it).

answered Jun 23 '15 at 16:17

EsseTi

4,079
5
36
63

thanks for the answer @EsseTi .. i call it from my controller ( javascript file ), so when i want to calculate more than one distance, i have to write the function multiple times with different $scope (exp: $scope.A,$scope.B..), because of that i want to the function become scope function and use **return dist** instead of **$scope.A = dist**..hope you get what i mean..:) – Sandhi Jun 23 '15 at 17:07
create a directive, each of them will have its own scope. so you can place it many times in the page – EsseTi Jun 24 '15 at 08:25

score 0 · Answer 2 · edited May 23 '17 at 12:22

The error you mentioned is that you are calling calcRoute twice, once with parameters, and once without:

calcRoute(ori,dest, function (err, dist) {
        if (!err) {
          return dist;
        }else{
                console.log("failed");
            }
    });
    return calcRoute();

The bigger problem is that you are not going to be able to evaulate your distance this way. Check out this SO post on evaluating asynchronous expressions.

Infinite loop with Angular expression binding

You're going to have to bind your values to $scope. If you're worried about cluttering up your controller with tons of $scope variables you could make an array and add multiple values to it, then use an ng-repeat to display the information in the view.

thanks for the answer and suggestion, i'll try it :) – Sandhi Jun 23 '15 at 18:06 — Sandhi, Jun 23 '15 at 18:06

how to turn a function into angular scope function

2 Answers2