更新到绑定输出非常慢

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 
});