javascript - angularjs-无法使用jquery提交文本框中的数据集

Question

我有一个使用谷歌地图的 Places API 的表单。我的表单有以下字段:
1) 文本框输入姓名。
2) 获取谷歌地址的文本框。
3) 保存谷歌地址纬度的文本框。
4) 保存谷歌地址经度的文本框。

我正在尝试将所有这些值传递给后端服务，但 place api 设置的值不会作为参数传递给服务:

这是我的 HTML:

<div ng-app="myApp" ng-controller="myMap">
  <form name="addForm" ng-submit="vm.addForm()" novalidate>
    <div class="form-group">
      <input type="text" name="name" id="name" ng-model="vm.name" placeholder="Name" />
      <h2>Address</h2>
      <input type="text" id="source_point" name="source_point" ng-model="vm.source_point" placeholder="Enter address here">
      <input type="text" id="src_lat" name="src_lat" ng-model="vm.src_lat" placeholder="latitude">
      <input type="text" id="src_long" name="src_long" ng-model="vm.src_long" placeholder="longitude">
    </div>
    <button type="submit">Add Data</button>
  </form>
</div>
<div id="source_map"></div>

我的 Controller 看起来像这样:

angular.module('myApp', [])
  .factory('myService', function($http) {})
  .controller('myMap', function(myService, $http, $scope) {

    var vm = this;
    var map;
    var marker;
    var latLngC;

    var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
    google.maps.event.addListener(places1, 'place_changed', function() {
      var place1 = places1.getPlace();

      var src_addr = place1.formatted_address;
      var src_lat = place1.geometry.location.lat();
      var src_long = place1.geometry.location.lng();

      var mesg1 = "Address: " + src_addr;
      mesg1 += "\nLatitude: " + src_lat;
      mesg1 += "\nLongitude: " + src_long;

      document.getElementById('src_lat').value = src_lat;
      document.getElementById('src_long').value = src_long;
    });

    $scope.post = {};
    $scope.post.addForm = [];
    $scope.vm = {};
    $scope.index = '';
    var baseUrl = 'api/';
    // function to submit the form after all validation has occurred
    vm.addForm = function() {
      var dataPost = {
        eventName: $scope.vm.name,
        eventLocation: $scope.vm.source_point,
        eventLocLat: $scope.vm.src_lat,
        eventLocLong: $scope.vm.src_long
      };
      return $http({
        method: 'post',
        url: baseUrl + 'addFormData',
        data: dataPost,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      });
    }
  });

这里是 FIDDLE

可能的原因是什么？

Answer 1

输入经度和纬度的 setter 错误:

$scope.$apply(function() {
    $scope.vm.src_lat = src_lat;
    $scope.vm.src_long = src_long;
  });

而不是

document.getElementById('src_lat').value = src_lat;
  document.getElementById('src_long').value = src_long;

将值放入范围内， Angular 将完成剩下的:)