DOM 元素更改时 ng-model 变量不更新

Question

我正在使用 AngularJS 制作网站。

我在 jade 中声明变量为：

div {{event.latitude}} {{event.longitude}}
      input#latitude(type='number' name='latitude' ng-model='event.latitude' required) 
      input#longitude(type='number' name='longitude' ng-model='event.longitude' required)

在同一页面上，我正在使用 Google 地图。我正在像这样更新 JavaScript 中的上述变量：

// adds a listener for when the user clicks the map
      map.addListener('click', function(event){

        // gets lat/long position from where the user clicked
        var latitude = event.latLng.lat();
        var longitude = event.latLng.lng();
        var latlng = new google.maps.LatLng(latitude, longitude);

        // sets the event marker to where the user clicked
        eventLocation.setPosition(latlng);

        console.log('Event Location:\n' , latitude, longitude);

        document.getElementById('latitude').value = latitude;
        document.getElementById('longitude').value = longitude;
      });

此代码有效。当我单击地图时，纬度和经度会在表单输入框中更新。

但是，我运行遇到的问题是 ng-model 变量没有更新。如上所示，我通过插值显示 ng-model 变量。但是，当我手动单击输入框并自己更改值时，它们只会显示一个值。当 javascript 更改输入值时，它们不会更新。

谁能指出我做错了什么？

Answer 1

任何超出 angularJS 上下文的东西都不会影响 $scope，因此您无法在 ng-model 中获得价值。

但是如果你想这样做，你必须将你的代码包装在 Angularjs 的上下文中（最佳实践是创建一个自定义指令）最后你必须打电话给

$scope.$digest()。

Answer 2

通过 addListener 附加的事件侦听器不会自动为您触发 AngularJS' 摘要循环。

由于摘要周期未启动，因此不会执行任何观察程序，不会检测到任何更改，UI 也不会更新。

使用$apply:

map.addListener('click', function(event) {
  scope.$apply(function() {
    scope.event.longitude = 100;
    scope.event.latitude = 50;
  });
});

我假设你的作用域上有一个 event 对象，因为你正在使用绑定 {{event.longitude}}。

你不应该真的需要 document.getElementById('latitude').value = latitude; 除非你将它用于其他在这个例子中不明显的东西。

DOM 元素更改时 ng-model 变量不更新

ng-model variable not updating when DOM element changes

google-maps-api-3

angularjs

angular-ngmodel