Question

我正在制作离子/角度的网络应用，用户可以通过弹出模态的Google地图或谷歌地图自动填充搜索框来选择位置。

为了获得最佳用户体验，我希望用户在地图上选择的地址输入到搜索框中。

如果我先在地图上选择一个位置，然后输入有效的搜索框来更改位置。但如果我先在搜索框中输入一个位置，然后尝试在地图上选择一个位置，输入框中的文字将保持不变。

我认为这与使自动完成工作所需的离子指令有关

$scope.disableTap = function(){
    container = document.getElementsByClassName('pac-container');
    // disable ionic data tab
    angular.element(container).attr('data-tap-disabled', 'true');
    // leave input field if google-address-entry is selected
    angular.element(container).on("click", function(){
        document.getElementById('searchBar').blur();
    });
};

这是搜索框声明

var input = document.getElementById('searchBar');
var autocomplete = new google.maps.places.Autocomplete(input);

我有一个与搜索框相关联的ng模型

<input type="text" id="searchBar" ng-focus="disableTap()" placeholder="Type address here..." 
ng-model="inputText">

我正在更新自动完成侦听器中的$ scope.inputText变量，如下所示：

$scope.inputText = autocomplete.getPlace().formatted_address;

并在地图监听器中如此：

$scope.inputText = address.formatted_address;

模糊功能是否会覆盖ng模型？我弄错了吗？

任何人都可以看到为什么我的ng模型更新，如果我有地图然后搜索框，但不是搜索框然后映射？

非常感谢任何帮助，谢谢

Answer 1

这个问题存在于这个地方，并且每次网站搜索失败时所描述的问题都是如此不同。

简单的答案是，不要直接在$ scope下存储值。这不是关于礼仪，而是一旦了解了它的原因就势在必行。您可以在下面的链接中阅读更多相关信息。

要解决您的情况，您应该在控制器或处理程序中执行类似的操作，

$scope.address.formatted = ...

并在您的观看中像这样访问它们

<input type="text" placeholder="..." ng-model="address.formatted" name="address.formatted">

引用链接中的相关部分，

不同之处在于我们没有将数据直接存储在范围内。现在当ng-model想要写时，它实际上是读取，然后写入。它从作用域读取person属性，这将从子作用域中起作用，因为子作用域将向上搜索读取。一旦找到人，就会写入person.first_name，这没问题。它只是有效。

这是链接：Nested Scopes in AngularJS on jimhoskins.com

看到这已经有几个月了，你可能已经解决了，但无论如何还是留下了答案。希望这会有所帮助。

ng-blur覆盖$ scope变量？ ng-model没有用$ scope变量离子/角度更新

1 个答案: