如何使用Google Maps Places API的結果更新Angular范圍參數？

Question

我想允許用戶使用Google Places API搜索位置，然后在他們單擊給定位置時更新范圍內參數的值。

希望一些視覺效果會有所幫助：

因此Google部分可以正常工作。 但是，當用戶單擊“新南威爾士州”時，這是評估{{ table.newItem }}的以下結果：

如您所見，由於用戶的click事件，作用域上的值尚未更新。

我不熟悉如何使用$watch()或$apply() 。 在這里有用嗎？

另外，我應該在哪里放置此代碼？ 現在，它在鏈接功能中，因此我可以將click事件定位到輸入框。 它應該去別的地方嗎？

Answer 1

在$scope.$apply設置范圍變量的地方包裝邏輯。

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

原因是Angular有一個事件循環，稱為摘要循環。 它一直在運行。 在摘要周期中，Angular將處理其數據模型，檢測任何更改，然后更新UI以反映更新的數據模型。 當在摘要周期的適當時刻更新數據模型時，所有這些都非常有用。

當您使用外部庫時，通常會把代碼綁定到在Angular的摘要周期之外發生的觸發器。 例如，即使一個簡單的setTimeout也會在摘要周期之外觸發，因為它會在JavaScript事件循環的后續迭代中由JavaScript引擎本身觸發。

發生這種情況時，數據模型確實會按您的預期進行更改，但是摘要周期的UI更新部分未運行，因為Angular尚未檢測到更改。 如果您執行另一個操作（甚至是一個不相關的操作）以在適當的摘要周期內修改范圍，那么您突然會看到UI更新以反映這些更改以及您在摘要周期外進行的更改。

您必須將超時內容包裝在$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在幕后為您$scope.$apply 。

回調中傳遞給$scope.$apply任何邏輯將在摘要周期的適當時間保留並執行，從而使Angular可以正常地使用數據模型中的最新數據更新UI。

我尚未使用Google Maps API，但可以肯定的是，您可能會陷入Google Maps API觸發/觸發的回調或事件。 如果是這種情況，請將邏輯包裝在$scope.$apply中的該處理程序中，您就可以開始了。