更新到綁定輸出非常慢

Question

我正在使用Google地圖自動完成在表單上提供城市搜索。它是由一個jQuery docuemnt準備回調實例化......

$(document).ready(function() { 
    var autocompleteOptions = { 
     types: ['(cities)'] 
    }; 
    var input = document.getElementById('locSearch'); 
    var autocomplete = new google.maps.places.Autocomplete(input, autocompleteOptions); 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     var place = autocomplete.getPlace(); 
     var searchScope = angular.element($("#search")).scope(); 
     searchScope.updateLoc({lat:place.geometry.location.lat(), lng:place.geometry.location.lng(), locName:place.formatted_address}); 
    }); 
}); 

正如你所看到的，我仰視的形式的範圍（可能打破某種最佳實踐），並呼籲在我的控制器的功能。 ..

$scope.updateLoc = function(newLoc) { 
    $scope.currentSearch.config.loc = newLoc; 
    $scope.updateLocLabel(); 
} 

$scope.updateLocLabel = function() { 
    if($scope.currentSearch.config.loc.distance == -1){ 
     $scope.locLabel = "Everywhere"; 
    }else{ 
     $scope.locLabel = "Within " + $scope.currentSearch.config.loc.distance + " miles of " + $scope.currentSearch.config.loc.locName.split(',')[0]; 
    } 
} 

這在我的HTML工作得很好，但綁定的標籤爲{{locLabel}}正在向上的5秒更新！ Batarang表示最長的手錶表示爲< 1ms。我在我的應用程序的其他地方做了一些類似的事情，但我從未見過Angular更新DOM中的這種延遲。

Answer 1

記住調用$scope.$apply當您更改範圍變量角度外。

google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    var place = autocomplete.getPlace(); 
    var searchScope = angular.element($("#search")).scope(); 
    searchScope.updateLoc({lat:place.geometry.location.lat(), lng:place.geometry.location.lng(), locName:place.formatted_address}); 
    searchScope.$apply(); // add this line 
});