Integration of AngularJS and Bridgeit.js (mobile web app)

Question

I am developing an angularJS web app where i need to scan a package from mobile device and i am using bridgeit for that.

In angular i wrote the following code to execute the functionality but it doesn't seems to work.

HTML CODE:

<input id="inp" />
<button id="scan" ng-click="scan()"> Scan </button>

JS CODE:

// inside angular controller
$scope.scan = funcction() {
    bridgeit.scan('scan', 'window.scan');
}

// in global scope
window.scan = function(event) {
    alert(event.data);
}

Result: bridgeit will able to scan the qr/bar code but its doesn't returning the value.

Answer 1

Try giving the function on the global scope a name and passing that to bridgeit.

Right now you are just assigning it to a property on the window called scan

Also make sure you do not have the function inside of any other functions or hidden from the global scope in some way.

Brigeit evaluates a string on the webpage in order to call your function.

// inside angular controller
$scope.scan = funcction() {
    bridgeit.scan('scan', 'globalScan');
}

// in global scope
window.scan = function globalScan(event) {
    alert(event.data);
}

Update:

One other thing that might help is to try creating your global function before you add the bridgeit script.

The key point though is that bridgeit handles the string you give it in an eval function and looks for it on the global scope.

Answer 2

After several tries, i found that the issue is with hashtags in URL.

Lets take an example using same code,

// inside angular controller
$scope.scan = funcction() {
    bridgeit.scan('scan', 'bridgeitCallback');
}

// in global scope
window.bridgeitCallback = function(event) {
    alert(event.data);
}

I have an url, like, http://stackoverflow.com/#question and i have a scan field inside that page. So when i scan the barcode, it change the URL to, something like,

http://stackoverflow.com/#c=scan%3Fid%3Dscan%26&r=http%3A//stackoverflow.com%23icemobilesx&o=enc%3Dbase64&h=%26h%3D%2523/question%26c%3DbridgeitCallback%26seq%3D1432552876578

More clearly,

http://stackoverflow.com/#c=scan{{some_uri_encode_characters}}/{{your_route,mine_is question}}/{{bridgeit_callback_method}}

Thus, it never able to have a successful POST callback.

I just enabled html5Mode in angular, with,

$locationProvider.html5Mode(true);

and everything works like a charm.

Hope it helps the future users as well.