javascript - 理解 $scope 和 angularjs

标签 javascript angularjs scope

我使用 html5 地理定位 API 创建了此代码片段。 如果用户允许并使用 {{lat}}

显示 lat,lng

我不明白为什么纬度仅在第二次单击时显示。 我以为 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);
  }
});

最佳答案

回调函数showPosition被称为“外部”Angular,因此虽然你的$scope属性会被更新,但 View 不会更新,因为Angular不知道这些变化。

在函数 showPosition() 的底部调用 $scope.$apply()。这将导致 digest cycle运行,Angular 将注意到您对 $scope 所做的更改(因为 Angular 由于在 HTML 中使用 {{}} 而设置了 $watches)并更新 View 。

关于javascript - 理解 $scope 和 angularjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15955984/

相关文章:

scope - 在 Go 中跨包访问变量

c++ - C++ 中容器的作用域

javascript - 在 svg 元素上设置自定义属性 (Raphael)

javascript - $rootScope.$apply() 不工作

angularjs - 如何将 HTML 传递给 Angular 指令?

javascript - Angular 和 ASP.NET MVC - 后端收到时参数为空

javascript - addEventListener 仅在第一次起作用

javascript - 一个可触摸的 jQuery 灯箱 - 从 iframe 打开到全屏

javascript - Google map 不会在页面加载时加载

php - 需要一个任意 PHP 文件,而不会将变量泄漏到作用域中