Question

在一个循环中，我有：

<div class="barcode" class="thumbnail"> 
  <canvas class="ean" barcode-generator barcode-value="9002236311036"> </canvas>
</div>

其中包含一大堆条形码。我已经静态添加了条形码值，但目的是通过{{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没有方法'split'

我不确定我做错了什么 - 阅读过很多论坛帖子，但不能完全理解它。

谢谢，罗布

编辑 - 继下面的Francisco帖子之后 - 添加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中，我补充道：

<div class="barcode" class="thumbnail"> 
  <canvas class="ean" barcode-value="{{barcode}}"> </canvas>
</div>

这就是错误......条形码值。在硬连线和工作之前......现在我试着把它放在循环中，它没有。

编辑...

<div class="barcode" class="thumbnail"> 
  <canvas class="ean" barcode-value="barcode"> </canvas>
</div>

删除花括号......嗯......我需要手册......

Answer 1

指令是扩展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());
        }
    };
});

Answer 2

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的摘要周期中，并会导致意外行为。

Answer 3

尝试获得类似的工作但没有成功..条形码只是不显示..你在github上有你的所有代码吗？

Answer 4

将此库用于条形码：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());
  }
}
});

和

<div class="barcode" class="thumbnail" ng-show="voucher.barcode">
<canvas class="ean" barcode-value="voucher.redemptionCode"> </canvas>
</div>

如果我没记错的话 - 你输入的任何号码都会被转换成条形码（虽然自从我这样做了一年多以后......）

希望这有帮助

试图将jquery插件转换为Angular Directive

4 个答案: