Question

AngularJS和JavaScript新手，在这里。

我正在尝试构建一个控制器，该控制器将提交地理编码请求并使用结果更新其模型。但是，我无法更新模型。

你可以在这里看到这个例子：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

我用一个包含一些修正的工作解决方案更新了你的小提琴。 http://jsfiddle.net/3aszL/3/

主要问题：

您的this.search是数组中的对象。它应该只是一个普通的对象（没有数组）。
您无法在其他函数调用或回调中使用关键字this，因为它将引用其他内容。我使用添加that = this然后使用that的惯例修复了它。显然，this在javascript中是一个令人困惑的概念，但却是一个重要的概念。请在this处阅读https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this。
这是另一个棘手的问题，但是你有时需要在角度运行$scope.$apply()以获得更新视图，特别是如果操作在异步操作的回调中运行，如我们在这里看到的那样。这是一个过时的，但很好的阅读：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

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

1 个答案: