AngularJS 和 Bridgeit.js 的集成（移动网络应用程序）

Question

我正在开发一个 angularJS 网络应用程序，我需要从移动设备扫描一个包裹，为此我正在使用 bridgeit。

在 angular 中，我编写了以下代码来执行该功能，但它似乎不起作用。

HTML 代码：

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

JS代码：

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

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

结果：bridgeit 将能够扫描 qr/bar 代码，但它不会返回值。

Answer 1

尝试为全局范围内的函数命名并将其传递给 bridgeit。

现在您只是将其分配给名为 scan

的 window 上的属性

还要确保您没有在任何其他函数中使用该函数或以某种方式将其隐藏在全局范围之外。

Brigeit 计算网页上的字符串以调用您的函数。

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

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

更新：

另一件可能有帮助的事情是在添加 bridgeit 脚本之前尝试创建全局函数。

关键点是 bridgeit 处理您在 eval 函数中提供的 字符串 并在全局范围内查找它。

Answer 2

这是我在自己的程序中使用的代码：

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

这对我有用。我刚刚在 angular 之外的主控制器 class 末尾添加了它。

您应该能够将准备好的部分放在页面的任何位置。

更新：

由于 Web 浏览器的工作方式，当您 return 调用 Bridgeit 时，您的网页将会刷新，因此您需要想出一些方法来存储您需要保留的任何信息。

本地存储可能是最佳选择。 AmplifyJS 库是执行此操作的一种非常简单的方法。

Answer 3

经过多次尝试，我发现问题出在 URL 中的 hashtags。

让我们用相同的代码举个例子，

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

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

我有一个 url，比如 http://whosebug.com/#question，并且我在该页面内有一个扫描字段。因此，当我扫描条形码时，它会将 URL 更改为

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

更清楚，

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

因此，它永远无法成功 POST 回调。

我刚刚在 angular 中启用了 html5Mode，

$locationProvider.html5Mode(true);

一切都很顺利。

希望对以后的用户也有帮助。

AngularJS 和 Bridgeit.js 的集成（移动网络应用程序）

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

javascript

mobile

angularjs