在指令的输入字段中设置值

Question

我正在关注这个http://blog.rangle.io/two-ways-to-build-a-location-picker-for-a-mobile-angularjs-application/教程。

演示：http://winkervsbecks.github.io/locator/

在位置查找部分中，我需要在输入字段中设置所选值，而不是弹出窗口。

该指令如下所示：

    .directive('locationLookup', function () {

   return {
      restrict: 'E',
      require: '?ngModel',
      templateUrl: 'components/locationLookup/locationLookup.html',
      scope: {},
      link: function(scope, iElement, iAttrs, model) {

        scope.limitTo = scope.$eval(iAttrs.limitTo) || 15;
        scope.callback = scope.$eval(iAttrs.callback);
        scope.results = [];

        // Generate a DOM elment for Google Places Service
        var elem = document.createElement('div');
            elem.setAttribute('id', scope.ID);

        // Setup Google Places Service
        var googlePlacesService = new google.maps.places.PlacesService(iElement[0].appendChild(elem));

        // Clear query and results
        scope.clear = function() {
          scope.results = [];
        };
                      console.log("MODEL IS ", model);


        // Pick A Location
        scope.pickLocation = function(location) {

          // Get details for the selected location
          googlePlacesService.getDetails({
            reference: location.reference
          }, function(place, status) {

            scope.$apply(function() {

              var locData = {
                name: location.terms[0].value,
                description: location.description,
                latitude: place.geometry.location.lat(),
                longitude: place.geometry.location.lng()
              };

              // Update model
              model.$setViewValue(locData);

              // Callback
              scope.callback && scope.callback(locData);

        model.$render = function() {
        iElement.val(model.$modelValue);
        iElement.change();};
        console.log("I ELEMENT AFTER UPDATINH", iElement)

            });
          });
        };
      }
    }

  })

我尝试添加：

 model.$render = function() {
            iElement.val(model.$modelValue);
            iElement.change();};
            console.log("I ELEMENT AFTER UPDATINH", iElement)

                });

但是iElement看起来像这样并且不会更新输入字段值。

[location-lookup.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.ng-empty.ng-not-empty-add.ng-pris…, context: location-lookup.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.ng-empty.ng-not-empty-add.ng-pris…]0: location-lookup.ng-untouched.ng-valid.ng-isolate-scope.ng-not-empty.ng-dirty.ng-valid-parsecontext: location-lookup.ng-untouched.ng-valid.ng-isolate-scope.ng-not-empty.ng-dirty.ng-valid-parselength: 1__proto__: jQuery[0]

我正在使用这个指令：

<div>
      <location-lookup ng-model="lookedUpLocation" limit-to="4"></location-lookup>
 </div>

问题是上面的输入字段来自另一个指令：

.directive('locationPredictions', [
  function() {
    return {
      restrict: 'E',
      scope: { results: '=' },
      template: '<input type="text" placeholder="search for a location">',
      link: function(scope, iElement, iAttrs) {

        // Setup Google Auto-complete Service
        var googleMapsService = new google.maps.places.AutocompleteService();
        var el = angular.element(iElement.find('input'));

        // Fetch predictions based on query
        var fetch = function(query) {
          googleMapsService.getPlacePredictions({
            input: query
          }, fetchCallback);
        };

        // Display predictions to the user
        var fetchCallback = function(predictions, status) {

          if (status !== google.maps.places.PlacesServiceStatus.OK) {

            scope.$apply(function() {
              scope.results = [];
            })

            return;

          } else {

            scope.$apply(function() {
              scope.results = predictions;
            })
          }
        };


        // Refresh on every edit
        el.on('input', function() {
          var query = el.val();

          if (query && query.length >= 3) {

            fetch(query);

          } else {

            scope.$apply(function() {
              scope.results = [];
            });
          }
        });

      }
    }
  }
]);