从异步回调更新 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
  };
})

Answer 2

我会尝试使用 Ionic + Estimote 信标。

如何在 Ionic Framework 中注入 "EstimoteBeacons"？对于其他插件，我使用了 ngCordova，但 Estimote 不在其中:-)

喜欢BLE插件 $ cordova 插件添加 com.megster.cordova.ble

您可以这样编码：

.controller('DashCtrl', function($scope, $cordovaBLE) {

  $ionicPlatform.ready(function() {
    $cordovaBLE.isEnabled().then(
      function() {
          $scope.bluetoothStatus = "Bluetooth LE is enabled";
          $scope.settings.enableBLE = true;
      },
      function() {
          $scope.bluetoothStatus = "Bluetooth LE is NOT enabled";
          $scope.settings.enableBLE = false;
      }
    );
  });

})

最好！！

从异步回调更新 Ionic 视图

Update Ionic view from async callback

android

cordova

angularjs-scope

estimote

ionic-framework