Update Ionic view from async callback

Question

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.

Samo · Accepted Answer · 2015-02-12 15:29:58Z

9

I found the solution. Because the callback takes place outside of the digest cycle, we need to call $scope.$apply(). Initializing the beacons to an empty array is not necessary.

Updated controller code:

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

Updated service code:

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

answered Feb 12, 2015 at 15:29

Samo

8,24013 gold badges63 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gumersindo Jose Rey · Accepted Answer · 2015-06-01 01:58:45Z

0

i'll try to use Ionic + Estimote beacons.

How do you inject "EstimoteBeacons" in the Ionic Framework? For other plugins I used ngCordova, but Estimote isn't in it :-)

Like BLE plugin $ cordova plugin add com.megster.cordova.ble

You can code like this:

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

})

best!!

answered Jun 1, 2015 at 1:58

Gumersindo Jose Rey

1

1 Comment

Samo Over a year ago

github.com/evothings/phonegap-estimotebeacons/blob/master/…

Collectives™ on Stack Overflow

Update Ionic view from async callback

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related