Question

我正在创建一个计算两点之间距离的小应用程序。 console.log正确输出计算，但不输出视图中的角度部分。仅在点击或第二次选择之后。我已经设置了两个选择字段（具有单独的ng模型），这些字段填充了JSON文件中的信息。我广泛搜索了互联网，但找不到答案。希望有人能帮助我... :)这是我的代码：

var app = angular.module('calculateApp', []);
app.controller('calculateController', function($scope, $http) {
    $http.get('json/stops.json')
        .then(function(item){
        $scope.stations = item.data;
        $scope.station1 = false;
        $scope.station2 = false;
        // Watch and calculate
        $scope.$watch( 
            function( $scope ) {
                function distance(lat1, lon1, lat2, lon2) {
                  var R = 6371;
                  var a = 
                     0.5 - Math.cos((lat2 - lat1) * Math.PI / 180)/2 + 
                     Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
                     (1 - Math.cos((lon2 - lon1) * Math.PI / 180))/2;
                  return R * 2 * Math.asin(Math.sqrt(a));
                }
                console.log(distance($scope.station1.stop_lat, $scope.station1.stop_lon, $scope.station2.stop_lat, $scope.station2.stop_lon));
                $scope.calculated = distance($scope.station1.stop_lat, $scope.station1.stop_lon, $scope.station2.stop_lat, $scope.station2.stop_lon);
            }
        );
        // end calculate
    });
});

我在我的HTML文件中使用它：

总距离为：{{calculated}}

Answer 1

首先在手表中你不需要将范围发送到函数中但是你可以为那些发送newValue，oldValue。

我认为通过从watch函数中删除$ scope来解决它

编辑：

我现在看到你想观看范围但是你不需要函数$ scope

看看this 我认为它会对你有帮助。

我不确定你是否可以观看整个范围，你应该选择你需要观看的东西。

Answer 2

您可以尝试在计算结束时添加$ scope。$ apply。

此致

伊恩

Answer 3

与此同时，我通过使用ng-show（它会自动更新）来修复它

角度计算未在视图中更新

3 个答案: