试图将jquery插件转换为Angular Directive

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没有方法'拆分'

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

谢谢,罗布

编辑 - 继下面的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());
        }
    };
});