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

2 个答案: