Question

我有一个类似下面的代码来计算两点之间的距离，这是我的离子项目的代码。我使用 allenhwkim 的 Angularjs-google-maps ，我想将代码转换为角度范围功能，以便它可以在我的查看上运行。顺便说一句，我从这个论坛的最后一个问题中得到了这段代码。

用于计算距离：

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

下面的代码用于运行该函数并将结果保存在$ scope.A中，以便我可以通过在查看

上键入{{A}}来调用结果

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

问题是，我可以使用控制器中的函数并使用$ scope，发送结果，但是如何将代码转换为{{calc（ori，dest））}}并在我的视图中返回距离。

我试图这样做：

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

并在我的查看中调用此功能，如下所示：

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

它不工作，返回未定义并在下方显示控制台错误：

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

希望有人能帮助我，谢谢:)）

Answer 1

不确定您是否可以动态计算该功能并打印返回值。

你能做的是：

将您的函数绑定到范围函数$scope.calc = function(x,y){...}
在里面做通常的作业$scope.A = dist。
在视图中只需打印{{A}}。
要调用该函数，只需使用calc(ori,dest)。（从你的代码中我没有得到你应该称之为的地方）。

Answer 2

您提到的错误是您正在调用calcRoute两次，一次使用参数，一次不使用：

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

更大的问题是你不能以这种方式评估你的距离。查看关于评估异步表达式的SO帖子。

Infinite loop with Angular expression binding

您必须将您的值绑定到$ scope。如果您担心使用大量$ scope变量使控制器变得混乱，您可以创建一个数组并为其添加多个值，然后使用ng-repeat在视图中显示信息。

如何将函数转换为角度范围函数

2 个答案: