当 DOM 元素更改时，ng-model 变量不更新答案

【问题标题】：ng-model variable not updating when DOM element changes当 DOM 元素更改时，ng-model 变量不更新
【发布时间】：2016-06-08 14:31:47
【问题描述】：

我正在使用 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 更改输入值时，它们不会更新。

谁能指出我做错了什么？

【问题讨论】：

标签： angularjs google-maps-api-3 angular-ngmodel

【解决方案1】：

通过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;，除非你将它用于本示例中不明显的其他事情。

【讨论】：

【解决方案2】：

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

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

$scope.$digest()。

【讨论】：