AngularJS範圍變量不更新時，它更改另一個函數

我試圖在Angular中實現谷歌地點搜索，但搜索結果列表沒有更新時發生回調。 它只會在函數設置變量運行兩次後更新$ scope變量？未更新變量是$scope.fullCtrl.searchResultsAngularJS範圍變量不更新時，它更改另一個函數

HTML：

<body ng-app="myApp" ng-controller="fullCtrl"> 
    <div class="row"> 
    <div class="col-sm-12 col-xs-12"> 
     <div id="map-canvas"></div> 
     <p>{{ fullCtrl.searchResults }}</p> <!-- not updating --> 

     <!-- click twice and it updates --> 
     <button ng-click="searchPlaces()">Search</button> 
    </div> 
    </div> 
</body>

myApp.js

myApp.factory('getWait', function ($http, $q) { 
    return { 
    getUrl: function(url, data) { 
    var deferred = $q.defer(); 
    $http.get(url, data) 
     .success(function(rtn) { 
      deferred.resolve({ 
      res: rtn 
      }); 
     }).error(function(msg, code) { 
      deferred.reject(msg); 
     }); 
    return deferred.promise; 
    } 
    } 
}); 


myApp.controller("fullCtrl", ['$scope', '$http', "$window", "getWait", 
        function ($scope, $http, $window, getWait) { 
    $scope.fullCtrl = {}; 

    $scope.fullCtrl.userLOCip = []; 
    $scope.fullCtrl.searchResults = []; //declared here! 
    var infoWindow = new google.maps.InfoWindow(); 
    var service; 
    var searchLoc; 
    getWait.getUrl('http://ipinfo.io/json').then(
    function(data) { 
     $scope.fullCtrl.userLOCip = data.res.loc.split(','); 
     $scope.fullCtrl.userLOCip[0] = Number($scope.fullCtrl.userLOCip[0]); 
     $scope.fullCtrl.userLOCip[1] = Number($scope.fullCtrl.userLOCip[1]); 
     console.log($scope.fullCtrl.userLOCip); 

     // Google maps 
     var mapOptions = { 
     zoom: 10, 
     center: new google.maps.LatLng($scope.fullCtrl.userLOCip[0], $scope.fullCtrl.userLOCip[1]), 
     } 

     $scope.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     service = new google.maps.places.PlacesService($scope.map); 
     searchLoc = new google.maps.LatLng($scope.fullCtrl.userLOCip[0], 
              $scope.fullCtrl.userLOCip[1]); 

    } 
); 

    $scope.searchPlaces = function() { 
    var request = { 
     location: searchLoc, 
     radius: 8047, // 5 miles 
     types: ['store'] 
    }; 
    service.nearbySearch(request, callback); 
    } 

    var callback = function (results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
     for (var i = 0; i < results.length; i++) { 
     $scope.fullCtrl.searchResults.push(results[i].name); // UPDATED HERE! 
     createMarker(results[i]); 
     console.log(results[i].name); 
     } 
    } 
    } 

    var createMarker = function (place) { 
    var marker = new google.maps.Marker({ 
     map: $scope.map, 
     position: place.geometry.location, 
     title: place.name 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(place.name); 
     infoWindow.open($scope.map, marker); 
    }); 
    } 

}]);

來源

2014-07-25 Elementary

您需要$ scope。$ apply（），因爲回調是由Angular不知道的谷歌地圖客戶端觸發的。 –

@AnonyChu就是這樣！非常感謝你 – Elementary

你需要$ $範圍適用於（），因爲回調被觸發。 Angular不知道的谷歌地圖客戶端。

^{將this置評爲回答，以便更容易看清楚。有關更多信息$apply()here，here和here。}

來源

2016-03-24 01:22:34 Zanon

AngularJS範圍變量不更新時，它更改另一個函數

回答

相關問題