AngularJS范围变量在另一个函数内更改时不会更新答案

【问题标题】：AngularJS scope variables doesn't update when it changes inside another functionAngularJS范围变量在另一个函数内更改时不会更新
【发布时间】：2014-07-25 21:47:00
【问题描述】：

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

}]);

【问题讨论】：

你需要 $scope.$apply() 因为回调是由 Angular 不知道的谷歌地图客户端触发的。
@AnthonyChu 就是这样！非常感谢

标签： javascript angularjs google-maps google-places-api

【解决方案1】：

你需要 $scope.$apply() 因为回调是由 Angular 不知道的谷歌地图客户端。

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

【讨论】：