Как добавить Google Места Api Angularjs директивы два раза на одной странице - PullRequest
Новая
       6

Как добавить Google Места Api Angularjs директивы два раза на одной странице

0 голосов
/ 07 января 2019

Я хочу добавить мою директиву google place api angularjs два раза на одной странице на другом элементе ввода, но работать на любом элементе ввода.

Вот мой код директивы Google angularjs 

 app.directive('googleplace', function () {
return {
    require: 'ngModel',
    link: function (scope, element, attrs, model) {

        scope.country_code = 'IN';

        console.log("COUNTRY CODE WHICH WOULD BE DISPLAY IN LOCATION RESULT");
        console.log(scope.country_code);
        console.log(element[0]);
        console.log("");

        var options = {
            types: [],
            componentRestrictions: {country: scope.country_code}
        };
        scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

        scope.gPlace.addListener('place_changed', function () {

            console.log("VALUE OF LOCATION USER INPUT");
            console.log(element.val());

            GetLatlong(element.val(), function (location_lat_lng) {
                console.log("HERE IS THE RESPONSE OF GET LAT LNG");
                console.log(location_lat_lng);

            });
            var address = {
                city: "",
                state: "",
                country: "",
                address: "",
                pinCode: ""
            };

            var locality, administrative_area_level_2;
            var geo_result_length = 0;

            console.log("VALUE OF GPLACE IN PLACE CHANGED");
            console.log(scope.gPlace);
            console.log(element[0]);

            // Get the place details from the autocomplete object.
            var place = scope.gPlace.getPlace();

            console.log("Places result in the google places directive");
            console.log(scope.componentForm);
            console.log("place");
            console.log(place);
            console.log("place.address_components");
            console.log(place.address_components);


            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                geo_result_length++;
                if (scope.componentForm[addressType]) {

                    var val = place.address_components[i][scope.componentForm[addressType]];
                    if (addressType == "premise") {
                        address.address ? address.address = address.address + "," + val : address.address = val;
                    }
                    if (addressType == "street_number") {
                        address.address ? address.address = address.address + "," + val : address.address = val;
                    }
                    if (addressType == "route") {
                        address.address ? address.address = address.address + "," + val : address.address = val;
                    }
                    if (addressType == "neighborhood") {
                        address.address ? address.address = address.address + "," + val : address.address = val;
                    }
                    if (addressType == "sublocality_level_1") {
                        address.address ? address.address = address.address + "," + val : address.address = val;
                    }
                    if (addressType == "locality") {
                        locality = val;
                    }
                    if (addressType == "administrative_area_level_2") {
                        administrative_area_level_2 = val;

                        if (locality != administrative_area_level_2) {
                            address.address ? address.address = address.address + "," + locality : address.address = locality;
                        }
                        address.city = administrative_area_level_2;
                    }
                    if (addressType == "administrative_area_level_1") {
                        address.state = val;
                    }
                    if (addressType == "country") {
                        address.country = val;
                    }
                    if (addressType == "postal_code") {
                        address.pinCode = val;
                    }
                }
            }

            scope.$apply(function () {
                model.$setViewValue(element.val());
            });
        });
    }
  };
});

Вот мой HTML-код 

<input id="location" type="text" name="Location" ng-model="location"  
class="form-control first" googleplace autocomplete="off"/>

<input type="text" id="location2" name="location2" class="form-control 
sett" googleplace ng-model="location2"  autocomplete="off" />

Я ожидаю вывод, что в обоих элементах ввода он работает отлично, но я не прав. когда я применяю директиву angularjs только к одному элементу ввода, тогда я работаю абсолютно нормально, но когда я применяю ее к обоим элементам ввода, она не работает с одним элементом, но я также пробовал это на разных страницах, это работает но я не могу понять, почему это не работает на той же странице. результат функции getPlaces () Google помещает в неопределенное в этом случае.

В приведенном выше коде директивы, когда я утешаю результат переменной place, он показывает меня неопределенным.

...