Question

我尝试在Angular中实施Google地方搜索，但搜索结果列表在回调发生时没有更新。 仅在函数设置变量运行两次后更新$ scope变量？未更新的变量是$scope.fullCtrl.searchResults

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

}]);

Answer 1

你需要$ scope。$ apply（）因为回调是由谷歌地图客户端，Angular不知道。

^{将this评论转换为答案，以便更容易查看。有关$apply() here，here和here的更多信息。}

AngularJS范围变量在其他函数内部更改时不会更新

1 个答案: