Tích hợp AngularJS và Bridgeit.js (ứng dụng web di động)

Question

Tôi đang phát triển một ứng dụng web angularJS nơi tôi cần quét gói từ thiết bị di động và tôi đang sử dụng bridgeit cho điều đó.

Trong góc cạnh, tôi đã viết mã sau để thực thi chức năng nhưng có vẻ như nó không hoạt động.

HTML Mã sản phẩm:

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

JS Mã sản phẩm:

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

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

quả: ý chí bridgeit thể quét qr/mã vạch nhưng nó không trả lại giá trị .

Answer 1

Sau một vài lần thử, tôi thấy rằng vấn đề là với hashtags trong URL.

Hãy lấy một ví dụ sử dụng cùng một mã,

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

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

Tôi có một url, như, http://stackoverflow.com/#question và tôi có một lĩnh vực quét bên trong trang đó.Vì vậy, khi tôi quét mã vạch, nó thay đổi URL để, một cái gì đó như thế nào,

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

rõ ràng hơn,

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

Vì vậy, nó không bao giờ có thể có một thành công POST gọi lại.

Tôi chỉ kích hoạt html5Mode trong góc, với,

$locationProvider.html5Mode(true); 

và mọi thứ hoạt động như một nét duyên dáng.

Hy vọng nó sẽ giúp người dùng trong tương lai.

Answer 2

Thử cung cấp chức năng trên phạm vi toàn cầu và đặt tên cho cầu nối.

Ngay bây giờ bạn chỉ gán nó vào một tài sản trên cửa sổ gọi là quét

Ngoài ra hãy chắc chắn rằng bạn không có chức năng bên trong của bất kỳ chức năng khác hoặc ẩn từ phạm vi toàn cầu một cách nào đó.

Brigeit đánh giá chuỗi trên trang web để gọi hàm của bạn.

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

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

Cập nhật:

Một điều khác mà có thể giúp là cố gắng tạo ra chức năng toàn cầu của bạn trước khi bạn thêm đoạn mã bridgeit.

Điểm mấu chốt là bridgeit xử lý các chuỗi bạn đưa nó vào hàm eval và tìm nó trên phạm vi toàn cục.

Answer 3

Đây là mã tôi đang sử dụng trong chương trình của riêng tôi:

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

này đang làm việc cho tôi. Tôi vừa thêm nó vào cuối lớp điều khiển chính của tôi bên ngoài góc cạnh.

Bạn sẽ có thể lấy phần trong chức năng sẵn sàng và đặt nó ở bất kỳ đâu trên trang.

Cập nhật:

Do cách các trình duyệt web hiệu quả, trang web của bạn sẽ được làm mới khi bạn trở về từ cuộc gọi đến Bridgeit vì vậy bạn sẽ cần phải tìm ra một số cách để lưu trữ bất kỳ thông tin mà bạn cần phải giữ.

Bộ nhớ cục bộ có lẽ sẽ là lựa chọn tốt nhất. Thư viện AmplifyJS là một cách rất đơn giản để làm điều này.