Блог

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

Я обновил вашу скрипку рабочим решением, которое включает в себя пару исправлений. http://jsfiddle.net/3aszL/3 /

Основные проблемы:

1. Ваш this.search был объектом внутри массива. Это должен быть просто обычный объект (без массива).
2. Вы не можете использовать ключевое слово this внутри другого вызова функции или обратного вызова, поскольку оно будет ссылаться на что-то другое. Я исправил это с помощью соглашения о добавлении, that = this затем использовании that . Очевидно, this это запутанная концепция в javascript, но важная. Прочитайте this здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this .
3. Это еще одна сложная задача, но вам иногда нужно запускать $scope.$apply() в angular, чтобы обновить представление, особенно если операция выполняется в обратном вызове асинхронной операции, как мы видим здесь. Вот устаревшее, но полезное чтение: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Удачи!