AngularJS作用域变量在另一个函数中更改时不会更新

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不知道的Google Maps客户端触发的。

^{将此评论变成答案，使其更易于查看。} ^{有关$apply()更多信息，请$apply() 此处，此处和此处。}

AngularJS作用域变量在另一个函数中更改时不会更新

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-24 01:22:34

AngularJS作用域变量在另一个函数中更改时不会更新

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-24 01:22:34

解决方案1
1 已采纳 2016-03-24 01:22:34