Ionic2 accesing variables in nested methods of cordova plugin

Ionic Framework ionic-v3
1

I am developing mobile app with ionic2(beta 8,Cordova 6.2) latest and facing issue to accessing variable in cordova mehtod(Functions).My code is like

import {Page, NavController, Alert, NavParams} from 'ionic-angular';
import {StatusBar,cordovaBeacon} from 'ionic-native'; 
import {AuthService} from '../home/authservice'; 
import {HomePage} from '../home/home';


export class UserPage {
    constructor(authservice, navcontroller) {
        this.service = authservice;
        this.nav = navcontroller;
        this.distance = 0;    
    }

    getDistance(){               
       this.distance=-50;//This is working and change view perfactly

       var delegate = new cordova.plugins.locationManager.Delegate();

       delegate.didRangeBeaconsInRegion = function (pluginResult) {
           //I got reading of beacons but can't access distance variable to change distance in associate view
           this.distance=pluginResult.beacons[0].rssi;
           /*This wan't work, can't access this.distance variable to update(View) proximity of ibeacon in delegete method*/
       }; 

       var uuid = '33333333-3333-4444-5555-666666666666 ';
       var identifier = 'BEacon 2';
       var minor = '1';
       var major = '1';

       var beaconRegion = new cordova.plugins.locationManager.BeaconRegion(identifier, uuid, major, minor);

      cordova.plugins.locationManager.setDelegate(delegate);
      cordova.plugins.locationManager.requestWhenInUseAuthorization();
      cordova.plugins.locationManager.requestAlwaysAuthorization();

      cordova.plugins.locationManager.startRangingBeaconsInRegion(beaconRegion)
          .fail(function(e) { console.error(e); })
          .done();
    }
 }

Using this plugin for beacon detection

  1. https://github.com/petermetz/cordova-plugin-ibeacon/

So Questions are

  1. Any global variable for ionic2 that can accessible anywhere?
  2. Any other workaround of above given issue?

Please Advice
-Naitik

2

Try using an arrow function. JavaScript has a really perverse concept of ‘this’.

2 Likes
3

Can you please elaborate little more as i am new to TypeScript, angular2 and ionic2!
I read that article and what i understand is

public run = () => { // <-- note syntax here
    alert(this.status);
}

Using my function

delegate.didRangeBeaconsInRegion =(pluginResult) =>{
    alert(this.distance);
}
4

Try

delegate.didRangeBeaconsInRegion = (pluginResult) => {

};

or

delegate.didRangeBeaconsInRegion = function(pluginResult) {

}.bind(this);
2 Likes
5

Hi,

Thanks for your help but it did not update associated view value?

Like

<i>Meters: {{distance}}</i>

or

<ion-range [(ngModel)]="distance" danger pin="true"></ion-range>

In short,

Values that have changed during beacon sighting doesn’t reflect on view.

delegate.didRangeBeaconsInRegion = function(pluginResult) {
     this.distance=pluginResult.beacons[0].accuracy;
     //unable to refresh view once value change
}.bind(this);

When adding switch to view tap on switch for on and off will change the value of complete view and also gives latest distance(sighting) given by beacon on tapping switch(ion-toggle)!

Weird behavior!