JS/Angular/Places API - document.getElementById（key）.value與表單輸入相關的問題

Question

我使用Google Places API在用戶搜索後自動將位置/目標填充到表單中。我有表單自動填充正確，但是當我將表單提交到我的數據庫時，對象每次都是未定義的。我在自動填充發生後嘗試提交表單時發生了我的問題。

奇怪的是，如果手動複製並粘貼自動填充到同一文本字段中的相同信息，表單將被提交併且數據將被輸入到我的數據庫中，而不會造成任何問題。

爲什麼會發生這種情況的任何想法？如果我自動將正確的值填充到表單中，那麼當我訪問控制器時，是否應該將這些值綁定到我的ng模型中？

HTML ========================

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <h3>Markers</h3> 
      <form ng-submit="addMarker(newMarker)"> 
       <div class="form-group"> 
        <p>Add a new marker: </p> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="title" placeholder="Title" ng-model="newMarker.title"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="address" placeholder="Address" ng-model="newMarker.address"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="category" placeholder="Category" ng-model="newMarker.category"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="url" placeholder="URL (optional)" ng-model="newMarker.url"> 
        </div> 
        <div class="form-group"> 
         <textarea type="textarea" class="form-control" id="description" placeholder="Message (optional)" ng-model="newMarker.description"></textarea> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="list" placeholder="Add to a list (optional)" ng-model="newMarker.list"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="latitude" placeholder="Latitude" disabled="true" ng-model="newMarker.latitude"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="longitude" placeholder="Longitude" disabled="true" ng-model="newMarker.longitude"> 
        </div> 
        <input type="submit" class="btn btn-primary"> 
       </div> 
      </form> 
     </div> 
     <div class="col-md-10"> 
      <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
      <div id="map"></div> 
     </div> 
    </div> 
</div> 

JS ============= =============

// Get the HTML input element for search for the autocomplete search box 
var input = document.getElementById('pac-input'); 
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

// Create the autocomplete object. 
var autocomplete = new google.maps.places.Autocomplete(input); 

// Event Listener for a Places API search 
google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
    var infoWindow = new google.maps.InfoWindow({map: map}); 
    var place = autocomplete.getPlace(); 
    var contentString = '<p><b>'+place.name+'</b></p>'+ 
         '<p>'+place.formatted_address+'</p>'; 
    var pos = { 
      lat: place.geometry.location.lat(), 
      lng: place.geometry.location.lng() 
     }; 
    fillInForm(place); 
    map.setCenter(pos); 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(contentString); 
    }); 
}); 

// Auto fill the form from the Places API search 
var fillInForm = function(place) { 
    // Get the place details from the autocomplete object. 
    var lat = place.geometry.location.lat(); 
    var lng = place.geometry.location.lng(); 
    var markerForm = { 
      title: place.name, 
      address: place.formatted_address, 
      coordinates: ""+lat+", "+lng+"" 
    }; 
    for (var key in markerForm) { 
     document.getElementById(key).value = ''; 
     document.getElementById(key).disabled = false; 
     var val = markerForm[key]; 
     document.getElementById(key).value = val; 
    } 
    $scope.markerForm = markerForm; 
} 

// CREATE NEW MARKER =============================== 
$scope.addMarker = function() { 
    markersFactory.addMarker($scope.newMarker, function(returnDataFromFactory){ 
     if(returnDataFromFactory.hasOwnProperty('errors')){ 
      $scope.newMarkerErrors = returnDataFromFactory.errors; 
     } else { 
      // console.log(returnDataFromFactory.data); 
      $scope.newMarker = {}; 
     } 
    }) 
} 

編輯：添加了容器的其餘部分。以前只提供表格div。添加了pac-input和map div。

Answer 1

當形式的元件是這樣的（直接DOM操作經由document.getElementById功能）得到更新：

for (var key in markerForm) { 
    document.getElementById(key).value = ''; 
    document.getElementById(key).disabled = false; 
    var val = markerForm[key]; 
    document.getElementById(key).value = val; 
} 

角是不知道這些變化。

的角方式data binding將用來替換fillInForm功能：

var fillInForm = function (place) { 
    $scope.$apply(function(){ 
     $scope.newMarker.title = place.name; 
     $scope.newMarker.address = place.formatted_address; 
     $scope.newMarker.latitude = place.geometry.location.lat(); 
     $scope.newMarker.longitude = place.geometry.location.lng(); 
    }); 
} 

$apply是因爲place_changed事件在這裏需要的是觸發 外角的消化循環

演示：plunker