android - 从异步回调更新 Ionic View

Question

我正在使用 phonegap-estimotebeacons我的 Ionic 应用程序中的插件，用于对一些信标进行测距。当它获得更新的信标信息时，我希望它更新 View ，但我的列表不会更新，直到我切换到另一个选项卡然后切换回来。

这是我列出所有找到的信标的 View :

<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>

这是呈现 View 的 Controller :

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

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

.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 对象时，我的 View 似乎应该使用react，但我必须转到另一个选项卡，然后返回以便我的 View 待更新。我该怎么做才能在 $scope 变量修改后立即更新 View ？

更新

修改了 Controller 代码以显示我已尝试将 $scope.beacons 初始化为空数组，但这没有任何区别。

Answer 1

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

更新的 Controller 代码:

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