从异步回调更新Ionic视图

Question

我在我的Ionic应用程序中使用phonegap-estimotebeacons插件来定位一些信标.当它获得更新的信标信息时,我希望它更新视图,但我的列表不会更新,直到我切换到另一个选项卡然后切换回来.

这是我的视图,列出了所有找到的信标:

<ion-view view-title="Beacons">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="beacon in beacons" type="item-text-wrap">
        <span>{{beacon.macAddress}}</span>
        <span>{{beacon.distance}}</span>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

这是呈现视图的控制器:

.controller('BeaconsCtrl', function($scope, Beacons) {
  $scope.beacons = [];
  Beacons.range($scope);
})

然后Beacons工厂开始对信标进行测距,并在每次成功回调时更新范围:

.factory('Beacons', function() {
  rangeBeacons = function($scope) {
    var success = function(beaconInfo) {
      $scope.beacons = beaconInfo.beacons;
    };

    var failure = function(errorMessage) {
      alert(errorMessage);
    };

    EstimoteBeacons.startRangingBeaconsInRegion(
      {},
      success,
      failure
    );
  };

  return {
    range: rangeBeacons
  };
})

从我看过的其他例子来看,看起来我的视图应该在我更新$scope对象时做出反应,但是我必须转到另一个选项卡然后返回以便我的视图更新.如果$scope修改变量,我该怎么做才能让视图更新？

更新

修改了控制器代码以显示我已尝试初始化$scope.beacons为空数组,但这没有区别.

Answer 1

我找到了解决方案.因为回调发生在摘要周期之外,所以我们需要调用$scope.$apply().不需要将信标初始化为空数组.

更新控制器代码:

.controller('BeaconsCtrl', function($scope, Beacons) {
  Beacons.range($scope);
})

更新的服务代码:

.factory('Beacons', function() {
  rangeBeacons = function($scope) {
    var success = function(beaconInfo) {
      $scope.beacons = beaconInfo.beacons;
      $scope.$apply();
    };

    var failure = function(errorMessage) {
      alert(errorMessage);
    };

    EstimoteBeacons.startRangingBeaconsInRegion(
      {},
      success,
      failure
    );
  };

  return {
    range: rangeBeacons
  };
})