javascript - 如何使用来自 Google Maps Places API 的结果更新 Angular 范围参数？

Question

我想允许用户使用 Google Places API 搜索位置，然后当他们点击给定位置时，更新范围内参数的值。

希望一些视觉效果能有所帮助:

因此 Google 部分可以正常工作。但是，当用户点击“New South Wales”时，这是评估 {{ table.newItem }} 的以下结果:

如您所见，由于用户的点击事件，我范围内的值尚未更新。

我不熟悉如何使用 $watch() 或 $apply()。其中任何一个在这里都有用吗？

另外，我应该把这段代码放在哪里？现在它在一个链接函数中，这样我就可以在点击事件中定位输入框。它应该去别的地方吗？

Answer 1

在 $scope.$apply 中设置范围变量的逻辑。

$scope.$apply(function () {
  // modify scope here
});

原因是 Angular 有一个称为摘要循环的事件循环。它一直在运行。在摘要周期中，Angular 将处理其数据模型，检测任何更改，然后更新 UI 以反射(reflect)更新后的数据模型。当数据模型在摘要周期的适当时刻更新时，这一切都很好。

当您使用外部库时，您通常最终会将代码绑定(bind)到 Angular 摘要周期之外发生的触发器。例如，即使是简单的 setTimeout 也会在摘要循环之外触发，因为它会在 JavaScript 事件循环的后续迭代中由 JavaScript 引擎本身触发。

发生这种情况时，数据模型确实会按照您的预期进行更改，但是摘要循环的 UI 更新部分不会运行，因为 Angular 尚未检测到更改。如果您执行另一个操作(即使是不相关的操作)以在适当的摘要周期内修改范围，那么您会突然看到 UI 更新以反射(reflect)这些更改以及您在摘要周期之外所做的更改。

您必须将超时的内容包装在 $scope.$apply 中，以确保 Angular 知道更改并可以适本地更新任何 UI 组件。

// Won't update any UI bound to "message" properly
// until something else triggers a UI update in a later digest cycle.
setTimeout(function () {
  $scope.message = "hi";
}, 0);

// Will update the UI immediately as expected because you're manually
// telling Angular to run the logic during a digest cycle.
setTimeout(function () {
  $scope.$apply(function () {
    $scope.message = "hi";
  });
});

这也是 Angular 提供自己的 $timeout 服务的原因。它实际上只是一个包含 setTimeout 并在幕后为您执行 $scope.$apply 的 Angular 服务。

传递给 $scope.$apply 的回调中的任何逻辑都将在摘要循环中的适当时刻被保留和执行，从而允许 Angular 使用来自数据模型。

我没有使用过 Google Maps API，但我很确定您可能正在连接到由 Google Maps API 触发/触发的回调或事件。如果是这种情况，请将该处理程序中的逻辑包装在 $scope.$apply 中，您就可以开始了。