QuaggaJS与角

Question

我在看一个叫做QuaggaJS的条形码扫描器。

但是看看这些例子，我不知道如何使它适应角度。例如，他们在input.js上使用的演示全是jQuery。

什么是把这个和角度结合起来的最好的方法？我是否应该保留jQuery，是否应该创建一个新的指令，等等？

任何想法都将受到热烈的欢迎。

Answer 1

对于其他人来说，这是我所做的。

这是部分摘录，但你应该明白。App包含配置，Quagga回调与您看到的所有其他示例(sans the jQuery)一样。

然后，我做了一个指令，这样条形码的文件/照片就可以直接保存为JSON变量：<input type="file" my-file="myItem.photo" my-file-type="barcode" />中的指针。

var App = {
    ...
};

App.init();

Quagga.onProcessed(function(result) {
    ...
};

Quagga.onDetected(function(result) {
    ...
}

angular.module( ...
        // Read files into angular
            .directive('file', [function () {
                return {
                    scope: {
                        myFile: '=',
                        myFileType: '@'
                    },

                    link: function (scope, element, attributes) {
                        element.bind('change', function (changeEvent) {
                            scope.$apply(function () {
                                scope.myFile = changeEvent.target.files[0];

                                if (scope.myFileType != null && scope.myFileType !== undefined && scope.myFileType == "barcode") {
                                    App.decode(URL.createObjectURL(scope.myFile));
                                }
                            });
                        });
                }
            }
        }])

希望这能帮到别人。

Answer 2

jQuery可以很容易地与另一个框架共存。以您正在构建的任何示例页面为例，查找所有$调用并将其替换为jQuery，并将jQuery放入无冲突模式

<script src="angular.js"></script>
<script src="jquery.js"></script>
<script>
  jQuery.noConflict();
</script>
<!-- rest of source follows -->

这将使您可以对一个实时页面进行编辑，然后您可以在有机会的情况下对示例进行角度化。当您查看一个具有两个框架的页面时，您将更容易地了解如何实现这一点。

您可能会发现，一旦您这样做了，您很可能希望将其中的一部分或全部工作到<quagga-scanner> 指令中，特别是如果您将在许多页面上使用该功能，但做出此决定的最佳方法几乎肯定是尝试。

Answer 3

这个答案会有点模糊，对此我很抱歉，但从目前的情况来看，这是我所能做出的最好的判断。

你总是可以混搭，但这不太明智。创建指令将是徒劳无功的尝试，但应该是一个组件。

与Will的答案一样，您可以始终使用jQuery的无冲突模式，然后对其使用角模式。

关于性能，jQuery是一个非常大的库；从某种意义上说，它确实是资源密集型的，您不需要一半的资源。

您可以尝试使用things的内置jQuery jqLite，它是jQuery的简化版本，只包含角不能做的事情(作为DOM操作库)。