Question

我正在尝试从常规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);
        }
    }
});

基本上问题是我的地方没有在模板中更新。它们在开始时加载正常（包含所有nexus内容），但是在我单击搜索（调用gmapSearchButtonClicked）之后，回调被触发，然后没有任何更新，即使所有内容都在控制台中正确显示。对我来说更奇怪的是，如果我再次点击搜索，那么模板将使用新数据进行更新。有什么想法吗？

Answer 1

想出来。基本上问题是由于回调来自另一个库，因此没有应用对places数组的更改。解决方案是将它包装在$ 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

Angular中的图书馆外回调

1 个答案: