Question

我使用html5 geolocation api创建了这个代码段。如果用户允许并显示lat {lng {{lat}}

我不明白为什么lat只会在第二次点击时显示。我以为showPosition（）已经触发了？您可以在第一次单击时看到它在控制台中显示。

HTML：

<body ng-controller="MainCtrl">
{{lat}}
  <button ng-click="getLocation()">Click</button>
</body>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.getLocation = function() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }
  function showPosition(position) {
    $scope.lat = "Latitude: " + position.coords.latitude;
    $scope.lng = "Longitude: " + position.coords.longitude; 
    console.log($scope.lat);
  }
});

Answer 1

回调函数showPosition被称为“外部”Angular，因此虽然您的$scope属性将被更新，但视图不会更新，因为Angular不知道这些更改。

在功能$scope.$apply()底部调用showPosition()。这将导致digest cycle运行，Angular将注意到您对$ scope所做的更改（因为Angular在HTML中使用了{{}}而设置的$ watch）并更新了视图

了解$ scope和angularjs

1 个答案: