1

在一个循环中，我有：

<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 调试显示以下错误：

类型错误：对象 9002236311036 没有方法“拆分”

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

谢谢，罗伯

编辑——从下面弗朗西斯科的帖子开始——添加 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>

删除大括号有效....嗯...我需要一本手册...

4

4 回答 4

7

指令是扩展 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());
        }
    };
});
于 2013-10-02T00:35:37.487 回答
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 的摘要循环中，并且会导致意外行为。

于 2014-07-01T00:39:05.937 回答
1

试图获得类似的工作但没有成功..条形码将不会显示..您是否在 github 上有所有代码可供使用？

于 2014-08-29T04:54:53.067 回答
0

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

如果我没记错的话 - 你输入的任何数字都会转换为条形码（尽管我这样做已经一年多了......）

希望这可以帮助

于 2014-09-09T13:31:36.567 回答