google-place autocomplete指令在单个页面上使用两次时不起作用

Question

我正在使用google-place指令来填充该位置。下面提到了我使用的指令：

​

app.directive('googlePlaces', function(){
  return {
    restrict:'E',
    replace:true,
    scope: {location:'='},
    template: '<input id="google_places_ac" name="google_places_ac" type="text" class="form-control area_input transition" />',
      link: function($scope, elm, attrs){
              if(attrs.city =='cities'){
                var options = {
                  types: ['(cities)'],
                  componentRestrictions: {country: 'IN'}
                }
              }
              else{
                var options = {
                  componentRestrictions: {country: 'IN'}
                }
              }
              var autocomplete = new google.maps.places.Autocomplete($("#google_places_ac")[0], options);

              google.maps.event.addListener(autocomplete, 'place_changed', function() {
               
                var place = autocomplete.getPlace();
                if(attrs.city =='cities'){
                  $scope.location = $("#google_places_ac")[0].value + '"' +place.geometry.location.lat() + '"' + place.geometry.location.lng();
                }
                else{
                  $scope.location = place.geometry.location.lat() + ',' + place.geometry.location.lng();
                }
                $scope.$apply();
              });
      }
  };
});

<google-places class="form-control location_field" location="location" city='cities' latlngs = "latlngs" ng-model="chosenPlace"></google-places>

​

但是由于我需要在一个页面上使用它两次，所以第二个指令不起作用，也就是说，它不显示自动完成结果。有人能帮我解决这个问题吗？如果能帮上忙，我们将不胜感激。

Answer 1

非常感谢你的回复。我解决了这个问题，将id(#google_places_ac)替换为'elm'，其中'ele‘是传递给链接函数的元素参数，它指的是当前元素。