0

我正在尝试从常规 js 转换为 angular，当我使用 google places 库时，我得到了奇怪的结果（我假设它与任何其他异步回调相同）。

这是代码：

var sparkApp = angular.module('sparkApp',[]);

sparkApp.controller('GooglePlacesListCtrl', function GooglePlacesListCtrl($scope) {
    $scope.places = [
        {'name': 'Nexus S',
            'formatted_address': 'Fast just got faster with Nexus S.'},
        {'name': 'Motorola XOOM™ with Wi-Fi',
            'formatted_address': 'The Next, Next Generation tablet.'},
        {'name': 'MOTOROLA XOOM™',
            'formatted_address': 'The Next, Next Generation tablet.'}
    ];

    // ***
    // **** THIS IS TIED TO AN NG-CLICK
    // ***
    $scope.gmapSearchButtonClicked = function ()
    {
        var query = $("#location_search").val();
        console.log(getMapRadius());
        var request = {
            location: map.getCenter(),
            radius: getMapRadius(),
            query: query
        };

        service.textSearch(request, $scope.searchCallback);
    }

    $scope.searchCallback = function (results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            // ***
            // **** THIS IS NOT WORKING - IS IT BECAUSE $SCOPE IS IN AN ASYNC CALLBACK?
            // **** IT ALSO SHOWS UP IN CONSOLE CORRECTLY
            // ***
            $scope.places = [{'name': 'Test Scenario',
                    'formatted_address': 'New Stuff'}];
            console.log($scope.places);
        }
    }
});

基本上问题是我的位置没有在模板中更新。它们在开始时加载良好（包含所有关联的东西），但是在我单击搜索（调用 gmapSearchButtonClicked）之后，回调被触发，然后没有任何更新，即使一切都在控制台中正确显示。对我来说更奇怪的是，如果我再次单击搜索，那么模板就会使用新数据进行更新。有任何想法吗？

4

1 回答 1

0

弄清楚了。基本上问题是由于回调来自另一个库，因此未应用对位置数组的更改。解决方案是将其包装在 $apply 中，如下所示：

        $scope.$apply(function () {
            $scope.places = [{'name': 'New',
                'formatted_address': 'New Stuff'}];
            console.log($scope.places);
        });

这是一个很好的完整解释：http: //jimhoskins.com/2012/12/17/angularjs-and-apply.html

于 2013-10-15T14:49:46.647 回答