Question

我正在编写一个简单的应用程序，但遇到了问题。我有一个范围元素和2个可点击的图标，如下所示：

<div class="item range">
        <i class="icon ion-minus" ng-click="testingMinus()"></i>
        <input id="rangeSlider" type="range" min="1" max="501" name="zoomLevel" ng-model="rangeSliderRadius" ng-change="updateCircleRadius(rangeSliderRadius)">
        <i class="icon ion-plus" ng-click="testingPlus()"></i>
</div>

在我的控制器中，我有：

$scope.rangeSliderRadius = 250;
  circle = new google.maps.Circle({
  map: map,
  center: latLng,
  radius: $scope.rangeSliderRadius,
  editable: true
})
$scope.updateCircleRadius = function(val) {
            circle.setRadius(parseInt(val));
            $scope.rangeSliderRadius = parseInt(val);
        }
$scope.testingPlus = function() {
  if (parseInt($scope.rangeSliderRadius) <= 501) {
  var tempRadius = parseInt($scope.rangeSliderRadius) + 5;
  $scope.updateCircleRadius(tempRadius);
  }
}

当模板加载时，事情似乎按预期工作 - 单击加号图标可视地更新范围元素（意味着它会在每次单击时移动垂直＆＃34;滑块＆＃34;在水平线上），并更新地图上的圆圈同时出现。但是，一旦我直接点击范围元素（也可以工作 - 直观地更新位置和圆圈），图标就会停止正常工作。点击图标后，不断更新地图上的圆圈，但范围元素不再发生变化。刷新页面会将事物返回到初始状态。我点击了chrome dev工具中的断点，查找了值，但没有发现任何乱序。

有人可以请求帮助 - 这种行为可能是什么原因？

使用ng-change后，Ng-click停止更新范围

0 个答案: