从脚本函数到输入字段ng-model给出了未定义的Angular值

Question

我在我的应用程序中使用谷歌地图，我在脚本标签中使用地图相关代码，在搜索结果之后，它给出经度，纬度，我得到这些值，并在输入

中显示这些值

这是我的脚本代码的一部分，它传递的长度和长度输入

 document.getElementById('lat').value = place.geometry.location.lat();
    document.getElementById('lng').value = place.geometry.location.lng();

这是我的HTML代码

<div class="from-group">
<li>Latitude: <input class="from-control" ng-model="formData.lat" id="lat"></li>
<li>Longitude: <input class="from-control" ng-model="formData.lng" id="lng" ></li>
<button class="btn btn-primary" ng-click="values()" id="idbtn" >Results</button>
</div>

但它给出了未定义的ng-model="formData。Lng"，当我输入一些东西时手动操作可以正常工作，但当值来自脚本时，它会给出未定义

这是我的控制器代码

Sscope.formData={}; 
    $scope.values = function () {
    console.log($scope.formData.lat);
    console.log($scope.formData.lng);
};

Answer 1

当你用

从javascript文件传递lat和long时

document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lng').value = place.geometry.location.lng();

ng-model未被更新或'触发'

试

angular.element($('#myInputElement')).triggerHandler('input')

这里有一个很好的帖子可能会有帮助。

你可以考虑使用谷歌地图指令，如ng-map

Answer 2

需要将$scope变量设置为$apply

var latElem = angular.element(document.getElementById('lat'))
var latScope = latElem.scope();
latScope.$apply("formData.lat=" + place.geometry.location.lat());

$apply计算一个Angular表达式，并启动一个AngularJS摘要循环来更新框架。