Integrazione di AngularJS e Bridgeit.js (app Web mobile)

Question

Sto sviluppando un'applicazione web angularJS in cui ho bisogno di scansionare un pacchetto dal dispositivo mobile e sto usando bridgeit per quello.

In angolare ho scritto il seguente codice per eseguire la funzionalità ma non sembra funzionare.

codice HTML:

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

JS CODICE:

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

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

Risultato: volontà bridgeit in grado di eseguire la scansione del/codice a barre QR, ma la sua non restituendo il valore .

Answer 1

Dopo diversi tentativi, ho riscontrato che il problema è con hashtags nell'URL.

consente di dare un esempio utilizzando lo stesso codice,

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

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

ho un URL, come, http://stackoverflow.com/#question e ho un campo di scansione all'interno di quella pagina.Così, quando la scansione del codice a barre, è cambiare l'URL, qualcosa di simile,

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

Più chiaramente,

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

Così, non è mai in grado di avere un successo POST callback.

Ho appena attivato html5Mode in angolare, con,

$locationProvider.html5Mode(true); 

e tutto funziona come un fascino.

Spero che aiuti anche i futuri utenti.

Answer 2

Provare a dare alla funzione sullo scope globale un nome e passarlo a bridgeit.

In questo momento si sta solo assegnarlo a una proprietà sulla finestra chiamata scansione

Assicurarsi inoltre non si ha la funzione all'interno di qualsiasi altra funzione o nascosto dal campo di applicazione globale in qualche modo.

Brigeit valuta una stringa nella pagina Web per chiamare la funzione.

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

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

Aggiornamento:

Un altra cosa che potrebbe aiutare è quello di provare a creare la vostra funzione globale prima di aggiungere lo script bridgeit.

Il punto chiave è che bridgeit gestisce la stringa assegnata a una funzione eval e la cerca nell'ambito globale.

Answer 3

Ecco il codice che sto usando nel mio programma:

function bridgeitCallback(result) 
{ 
    alert("result is: " + JSON.stringify(result)); 
} 

$(document).ready(function readyDoc() 
{ 
    var scanButton = $('#scanButton'); 
    scanButton[0].addEventListener('click', function() { 
     bridgeit.scan('scan', 'bridgeitCallback'); 
    }); 
}); 

Questo sta lavorando per me. L'ho appena aggiunto alla fine della mia classe di controller principale al di fuori di angular.

Dovresti essere in grado di prendere la sezione nella funzione Pronto e metterla in qualsiasi punto della pagina.

Aggiornamento:

A causa del modo in cui i browser funzionano, la pagina web verrà aggiornata quando si torna dalla chiamata alla Bridgeit così hai bisogno di capire un modo per memorizzare tutte le informazioni è necessario mantenere.

L'archiviazione locale sarebbe probabilmente l'opzione migliore. La libreria AmplifyJS è un modo molto semplice per farlo.