试图将jquery插件转换为Angular Directive
在一个循环中，我有：
这会阻止一大堆条形码。 我已经静态添加了条形码值，但目的是通过{{barcodeNumber}}添加
我找到了一个非常好的插件https://github.com/joushx/jQuery.EAN13 ，它将数字转换为条形码。
在各种教程之后，我编写了以下指令（虽然我还没有完全了解如何或为什么）。 我还在Angular上面包含了jquery，在Angular之后包含了插件。
app.directive('barcodeGenerator', function () { return { restrict: 'A', scope: { barcodeValue: '=' }, link: function (scope, elem, attrs) { console.log("Recognized the barcode directive usage"); $('.ean').EAN13(scope.barcodeValue); } } });
console.log有效 – 但是我调用插件的位不会… Chrome调试显示以下错误：
TypeError：对象9002236311036没有方法’拆分’
我不确定我做错了什么 – 看过很多论坛post，但不能完全理解它。
谢谢，罗布
编辑 – 继下面的Francisco的post – 添加toString（）已经有效。 唯一的问题是，我不知道为什么/如何运作。
app.directive('barcodeGenerator', function () { return { restrict: 'A', scope: { barcodeValue: '=' }, link: function (scope, elem, attrs) { console.log("Recognized the barcode directive usage"); $('.ean').EAN13(scope.barcodeValue.toString()); } } });
所以我做了一点重构：
app.directive('ean', function () { return { restrict: 'C', scope: { barcodeValue: '=' }, link: function (scope, elem) { console.log("Recognized the barcode directive usage"); $(elem).EAN13(scope.barcodeValue.toString()); } } });
- 我想清理我的html，所以使用了一个类（限制C？） – 在范围内设置条形码值。
然后在我的HTML中，我补充说：
这就是错误……条形码值。 在硬连线和工作之前……现在我试着把它放在循环中，它没有。
编辑…
删除大括号……嗯……我需要手册……
指令是扩展HTML的一种方式。 这样做的全部目的是AngularJS鼓励将所有DOM操作保持在控制器之外，以便它们变得可测试。
我不会详细了解指令是如何工作的，它可能是AngularJS最强大和最令人困惑的方面。
简而言之，指的是你做过的事情：
app.directive('barcodeGenerator', function () { return { // Restrict tells AngularJS how you will be declaring your directive in the markup. // A = attribute, C = class, E = element and M = comment restrict: 'A', // The directive compiler actually happens before the $scope is available in AngularJS, therefore // You need to pass certain values into your scope. In this instance, you are passing the barcodeValue // attribute and telling it its equal. In other words where you use scope.barcodeValue.toString() below // You are able to do this because of the below declaration. There are other symbols you can use to tell // the compiler to do other things such as interpret the values as a method, but I'll let you investigate scope: { barcodeValue: '=' }, // The link function passes the element to the directive and allows you to manipulate the dom // You could event try to replace $(.ean) with just elem below, since you are passing the scope, // element and attribute to the function below, then using the jQuery plugin to do the rest. link: function (scope, elem, attrs) { console.log("Recognized the barcode directive usage"); $('.ean').EAN13(scope.barcodeValue.toString()); } }; });
francisco.preller绝对正确。 只需要一项改进。 如果你改变了
link: function (scope, elem, attrs) { console.log("Recognized the barcode directive usage"); $('.ean').EAN13(scope.barcodeValue.toString()); }
同
link: function (scope, elem, attrs) { console.log("Recognized the barcode directive usage"); elem.EAN13(scope.barcodeValue.toString()); }
它不仅变得更加愤怒，而且还遵循’elem’参数的作用，它已经是一个jQuery对象（或jQLite，如果没有加载jQuery，它是一个jQuery子集）。 任何使用直接DOM操作的行为都被谷歌认为是不好的做法，因为它不能总是反映在Angular的摘要周期中并且会导致意外行为。
试图得到类似的东西没有成功..条形码只是不显示..你有你在github上的所有代码使用？
使用此库作为条形码： https ： //github.com/joushx/jQuery.EAN13
app.directive('ean', function () { return { restrict: 'C', scope: { barcodeValue: '=' }, link: function (scope, elem, attr) { console.log("Recognized the barcode directive usage"); $(elem).EAN13(scope.barcodeValue.toString()); } } });
和
如果我没记错的话 – 你输入的任何数字都会被转换成条形码（虽然我这样做了一年多了……）
希望这可以帮助