如何在同一页面上两次添加Google Places api angularjs指令

Question

我想在同一页面上的不同输入元素上两次添加我的google place api angularjs指令两次，但是可以在任何输入元素上使用。

这是我的Google Places angularjs指令代码

function getSmallImage(stateAbbreviation) {
  console.log('STATE: ' + stateAbbreviation);
  return getImageUrl(400, 720, stateAbbreviation);
}

这是我的HTML代码

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

我希望输出在两个输入元素中都能正常工作，但是我错了。当我仅将angularjs指令应用于一个输入元素时，我就可以正常工作，但是当我将其应用于两个输入元素时，则不适用于单个元素，但我也尝试过在不同页面上使用它，但我无法理解为什么这在同一页面上不起作用。在这种情况下，未定义Google Places的getPlaces（）函数的结果。

在上面的指令代码中，当我管理places变量的结果时，它显示为未定义。