Question

我有一个angularjs应用程序，它使用传单映射。该应用程序旨在测量2个标记之间的距离（以米为单位）。加载时正确测量距离，但移动标记时距离未按预期更新。似乎是在拖动标记时，不调用ng-change指定的方法。

我不明白为什么会这样。

以下代码是代码的简化版本：

Number.prototype.toRad = function() {return this * Math.PI / 180;}

function distance(lat1, lat2, lon1, lon2) {
    var R = 6371000; // meter
    var Phi1 = lat1.toRad();
var Phi2 = lat2.toRad();
var DeltaPhi = (lat2 - lat1).toRad();
var DeltaLambda = (lon2 - lon1).toRad();

var a = Math.sin(DeltaPhi / 2) * Math.sin(DeltaPhi / 2)
        + Math.cos(Phi1) * Math.cos(Phi2) * Math.sin(DeltaLambda / 2)
        * Math.sin(DeltaLambda / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;

return d;
}

var munichMarkers = {
    munich1 : {
        lat : 48.14959568930188,
        lng : 11.528091430664062,
        draggable : true},

    munich2 : {
        lat : 48.123246933031844,
        lng : 11.6070556640625,
        draggable : true}
};  

var demoapp = angular.module("demoapp", ["leaflet-directive" ]);

    demoapp.controller("DemoController", [ "$scope", "$http", "$location", "leafletData", 
             function ($scope, $http, $location, leafletData) {             

angular.extend($scope, {
  markers: {},            
  europeanPaths: {},     
  cen: {
    lat: 48.1333,
    lng: 11.5667,
    zoom: 12
  }           
}); 

angular.extend($scope, {
  markers: munichMarkers
});

angular.extend($scope, {
europeanPaths: {
    muenchenArea: {
    latlngs: [ $scope.markers.munich1, $scope.markers.munich2],
    type: 'rectangle',
    color: '#FF0000',
    weight: 3,
    stroke: true
    }
  }
});

$scope.dist = distance($scope.markers.munich1.lat, $scope.markers.munich2.lat,             $scope.markers.munich1.lng, $scope.markers.munich2.lng); 

$scope.change = function() {            
        $scope.dist = distance($scope.markers.munich1.lat, $scope.markers.munich2.lat,     $scope.markers.munich1.lng, $scope.markers.munich2.lng); 
        alert("called");                
 }; 
 }]);
</script>

</head>

<body ng-controller="DemoController">  
    <form>      
    Distance  : <input ng-model="dist" ng-change="change()" />      
    </form>
    <leaflet center="cen" width="640" height="400" paths="europeanPaths" markers="markers"></leaflet>
  </body>
</html>

Answer 1

根据the manual他们说：

仅当输入值的更改导致将新值提交给模型时，才会评估ngChange表达式。它不会被评估： *如果$ parsers转换管道返回的值没有改变 *如果输入继续无效，因为模型将保持为空 *如果以编程方式更改模型，而不是更改输入值

所以，如果是我，我会尝试验证是否正在启动change（）（通过记录它或其他东西）。如果它没有开火，那么我会看看是否是第三颗子弹。

当标记改变位置时，传单不更新距离值

1 个答案: