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

基本的に問題は、私の場所がテンプレートで更新されていないことです。最初は正常に読み込まれますが (すべての nexus が含まれます)、検索をクリックした後 (gmapSearchButtonClicked を呼び出します)、コールバックが起動され、すべてがコンソールに正しく表示されていても、何も更新されません。さらに奇妙なのは、もう一度検索をクリックすると、テンプレートが新しいデータで更新されることです。何か案は？

4

1 に答える 1

0

理解した。基本的に問題は、コールバックが別のライブラリからのものであるため、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

于 2013-10-15T14:49:46.647 に答える