Question

我对AngularJS很陌生，并且在使用谷歌地图进行自动完成事件后更新了一些输入字段。这个想法是当用户输入他的城市/邮政编码时，我会更新3个自己链接到对象的字段。到目前为止，我设法有一个工作代码，除了有时字段没有立即更新：我必须自动完成两次，以便好的值将出现在字段中。我已经调整了现有的角度指令以获得我想要的东西，但由于这对我来说是新的，我不知道我是否使用了正确的方法。

以下是我使用的JS指令：

angular.module( "ngVilleAutocomplete", [])
 .directive('ngAutocomplete', function($parse) {
return {

  scope: {
    details: '=',
    ngAutocomplete: '=',
    options: '=',
    data: '='
  },

  link: function(scope, element, attrs, model) {

    //options for autocomplete
    var opts

    //convert options provided to opts
    var initOpts = function() {
      opts = {}
      if (scope.options) {
        if (scope.options.types) {
          opts.types = []
          opts.types.push(scope.options.types)
        }
        if (scope.options.bounds) {
          opts.bounds = scope.options.bounds
        }
        if (scope.options.country) {
          opts.componentRestrictions = {
            country: scope.options.country
          }
        }
      }
    }
    initOpts()

    //create new autocomplete
    //reinitializes on every change of the options provided
    var newAutocomplete = function() {
      scope.gPlace = new google.maps.places.Autocomplete(element[0], opts);
      google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
        scope.$apply(function() {
            scope.details = scope.gPlace.getPlace();
            //console.log(scope.details)
            var HasCP = false;
            for (var i=0 ; i<scope.details.address_components.length ; i++){
              for (var j=0 ; j<scope.details.address_components[i].types.length ; j++){
                if (scope.details.address_components[i].types[j] == 'postal_code' && scope.data.CP != 'undefined'){
                  scope.data.CP = scope.details.address_components[i].long_name;
                  HasCP = true;
                } else if (scope.details.address_components[i].types[j] == 'locality' && scope.data.Ville != 'undefined') {
                  scope.data.Ville = scope.details.address_components[i].long_name;
                } else if (scope.details.address_components[i].types[j] == 'country' && scope.data.Pays != 'undefined') {
                  scope.data.Pays = scope.details.address_components[i].long_name;
                }
              }
            }
            if (!HasCP){
              var latlng = {lat: scope.details.geometry.location.lat(), lng: scope.details.geometry.location.lng()};
              var geocoder = new google.maps.Geocoder;

              geocoder.geocode({'location': latlng}, function(results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                  for (var i=0 ; i<results[0].address_components.length ; i++){
                      for (var j=0 ; j<results[0].address_components[i].types.length ; j++){
                        if (results[0].address_components[i].types[j] == 'postal_code' && scope.data.CP != 'undefined'){
                          scope.data.CP = results[0].address_components[i].long_name;
                          console.log('pc trouvé :' + scope.data.CP);
                        } 
                      }
                  }
                }
              });

            }

            //console.log(scope.data)
            scope.ngAutocomplete = element.val();
        });
      })
    }
    newAutocomplete()

    //watch options provided to directive
    scope.watchOptions = function () {
      return scope.options
    };
    scope.$watch(scope.watchOptions, function () {
      initOpts()
      newAutocomplete()
      element[0].value = '';
      scope.ngAutocomplete = element.val();
    }, true);
  }
};

}）;

匹配的HTML代码如下：

<div class="form-group">
                    <lable>Code postal : </label>
                    <input type="text" id="Autocomplete" class="form-control" ng-autocomplete="cities_autocomplete" details="cities_autocomplete_details" options="cities_autocomplete_options" data="client" placeholder="Code postal" ng-model="client.CP" />
                </div>
                <div class="form-group">
                    <lable>Ville : </label>
                     <input type="text" id="Autocomplete" class="form-control" ng-autocomplete="cities_autocomplete" details="cities_autocomplete_details" options="cities_autocomplete_options" data="client" placeholder="Ville" ng-model="client.Ville" />
                </div>
                <div class="form-group">
                    <lable>Pays : </label>
                    <input type="text" class="form-control" name="Pays" ng-model="client.Pays" placeholder="Pays" />
                </div>

你会看到我通过＆＃34;客户＆＃34;直接对象我的指令，然后更新这个对象。我希望在客户端对象的值更新后立即更新html页面，但我不会总是这样：

如果我在同一城市搜索两次，则值不会更新
如果我搜索某个城市，Google就不会向我发送邮政编码，因此我必须向地理编码服务部门提出另一个请求，我会收到邮政编码，但是当我的client.CP字段正确更新时，更改在CP输入字段，直到我再次搜索。

提前感谢我对我做错的任何建议。

使用angularJS自动完成后的字段更新

0 个答案: