Question

我正在使用Google地图自动填充功能在表单上提供城市搜索功能。它由jQuery docuemnt ready回调实例化......

$(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显示最长的手表表达为＆lt; 1毫秒。我在我的应用程序中的其他地方做过一些类似的事情，但是我从来没有看到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
});

更新绑定输出非常慢

1 个答案: