Javascript AngularJS：如何从地理编码功能更新数据模型？

AngularJS和JavaScript新手，这里

我正在尝试构建一个控制器，它将提交一个地理代码请求，并用结果更新其模型。但是，我在更新模型时遇到了问题

你可以在这里看到一个生活在小提琴中的例子：

在我的

submitQuery

函数中，我无法正确地将geocode方法的结果传递回

search

数组。有什么建议吗

这是我的HTML：

<div ng-app="weather">
    <div ng-controller="SearchController as searchCtrl" class="container-fluid">
        <div>
            <form ng-submit="searchCtrl.submitQuery()" name="searchForm" role="form" class="">
                <div class="form-group">
                    <label for="searchInput">Search</label>
                    <input id="searchInput" class="form-control" type="text" ng-model="searchCtrl.search.geoQuery" placeholder="Enter your zip code...">
                    <input id="searchSubmit" class="btn btn-primary" type="submit">
                </div>
            </form>

            <h1>{{ searchCtrl.search.resultLatLng }}</h1>
        </div>

        <div class="playback">
            <small>searchCtrl.query = {{ searchCtrl.search.geoQuery }}</small>
            <small>searchCtrl.resultLatLng = {{ searchCtrl.search.resultLatLng }}</small>
        </div>
    </div>

</div>

---

我用一个有效的解决方案更新了你的小提琴，其中包括一些修正。

主要问题：

您的

this.search

是数组中的一个对象。它应该只是一个普通对象（没有数组）

不能在另一个函数调用或回调中使用关键字

this

，因为它会引用其他内容。我用添加

that=this

然后使用

that

的约定修复了它。显然，

这个

在javascript中是一个令人困惑的概念，但却是一个重要的概念。请阅读

此

此处：

这是另一个棘手的问题，但有时您需要以angular方式运行

$scope.$apply（）

，以更新视图，特别是当操作在异步操作的回调中运行时，正如我们在这里看到的。这是一本过时但很好的读物：

---

祝你好运

也许这个演示可以帮助你：回答得很好，ramdog。谢谢你的指点和阅读材料！

var app = angular.module("weather", []);

app.controller("SearchController", function($scope){
    var geocoder  = new google.maps.Geocoder();

    this.search = [
        {
            geoQuery: "",
            resultLatLng: "",
            resultCity: ""
        }
    ];

    this.submitQuery = function() {
        geocoder.geocode({'address': this.search.geoQuery}, function(result, status){
            if (status === google.maps.GeocoderStatus.OK) {
                search.resultLatLng = {
                    lat: result[0].geometry.location.lat(),
                    lng: result[0].geometry.location.lng()
                };
            } else {
                alert("Something went wrong: " + status);
                return false;
            }
        });
    };
});