javascript - AngularJS:如何通过地理编码功能更新数据模型？

Question

AngularJS 和 JavaScript 新手，请看这里。

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

您可以在此处查看该示例:http://jsfiddle.net/3aszL/

在我的 submitQuery 函数中，我无法将地理编码方法的结果正确传递回 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>

和我的 JS:

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;
            }
        });
    };
});

Answer 1

我用一个可行的解决方案更新了你的 fiddle ，其中包括一些更正。 http://jsfiddle.net/3aszL/3/

主要问题:

1. 您的 this.search 是数组中的一个对象。它应该只是一个普通对象(无数组)。
2. 您不能在另一个函数调用或回调中使用关键字 this，因为它会引用其他内容。我通过添加 that = this 然后使用 that 的约定来修复它。显然，this 在 JavaScript 中是一个令人困惑的概念，但却是一个重要的概念。在此处阅读此:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this .
3. 这是另一个棘手的问题，但有时您需要以 Angular 运行 $scope.$apply() 来更新 View ，特别是当该操作在异步回调中运行时正如我们在这里看到的操作。这是一篇过时但很好读的文章:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

祝你好运!