2

I am using the phonegap-estimotebeacons plugin in my Ionic app to range some beacons. When it gets updated beacon info, I want it to update the view, but my list doesn't get updated until I switch to a different tab and then switch back.

Here's my view that lists all the found beacons:

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

Here's the controller that renders the view:

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

The Beacons factory then starts to range the beacons and update the scope on every success callback:

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

From other examples I've seen, it looks like my view should react when I update the $scope object, but I have to go to a different tab and then come back in order for my view to be updated. What can I do to get the view to update as soon as the $scope variable is modified?

Update

Modified the controller code to show that I have attempted to initialize $scope.beacons to an empty array, but this makes no difference.

4

2 回答 2

9

我找到了解决方案。因为回调发生在摘要循环之外，我们需要调用$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
  };
})
于 2015-02-12T15:29:58.253 回答
0

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

你如何在 Ionic 框架中注入“EstimoteBeacons”？对于其他插件，我使用了 ngCordova，但 Estimote 不在其中:-)

像 BLE 插件 $cordova plugin 添加 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;
      }
    );
  });

})

最好的！！

于 2015-06-01T01:58:45.003 回答