Angular JS/Firebase - 如何将 Google Autocomplete 的值传递给 Firebase？答案

【问题标题】：Angular JS/Firebase - How do I pass value of Google Autocomplete to Firebase?Angular JS/Firebase - 如何将 Google Autocomplete 的值传递给 Firebase？
【发布时间】：2015-03-06 14:13:14
【问题描述】：

我正在使用 AngularJS/Firebase (AngularFire) 和 Google Maps API 创建一个基本的旅行愿望清单。

到目前为止，我有以下内容：

HTML：

<form ng-submit="setNewEntry(field)">
   <input type="text" googleplace ng-model="field" />
</form>

控制器功能：

$scope.setNewEntry = function(val) {
  ref.child("places").push({
    "location": val
  })
  $scope.field = "";
}

指令：（将自动完成绑定到输入）

.directive('googleplace', function() {
  return {
    link: function(scope, element, attr) {
       scope.gPlace = new google.maps.places.Autocomplete(element[0]);
    }
  }
})

这一切都很好，并将价值推送到我的 Firebase 应用程序。我遇到的问题是 ng-model 没有获得 Google 提供的价值。

假设我输入“纳什维尔”并收到一个自动完成建议，我单击它并使用“美国田纳西州纳什维尔”填写输入 - 一旦我按 Enter 提交表单，它就会通过我的初始搜索查询“纳什维尔”。

关于如何通过输入的最终值有什么想法吗？

谢谢！

【问题讨论】：

我认为您应该将指令 var 与父范围联系起来，例如 scope: { directiveVar: '=' parentScopeVar }
这里需要注意的是，您应该始终使用object.property 样式符号与 ng-model，因为直接引用可能会被破坏。例如，data.field 与 field 在您的 ng-model 和范围内。

标签： angularjs google-maps firebase

【解决方案1】：

我认为您还没有创建一个变量来保存自动完成结果的值。有一个简单的指令用于将 google 地方自动完成添加到称为 ng-Autocomplete 的文本框元素。

请参考以下代码example了解更多我所说的代码实现。

 //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() {
//              if (scope.details) {
                scope.details = scope.gPlace.getPlace();
//              }
              scope.ngAutocomplete = element.val();
            });
          })
        }
        newAutocomplete()

【讨论】：

谢谢@AniV，有机会我会试试这个并回复你。