javascript - 试图将 jquery 插件转换为 Angular 指令

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 操作保留在 Controller 之外，以便它们变得可测试。

我不会详细说明指令究竟是如何工作的，它可能是 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());
        }
    };
});