试图jQuery插件转变为角指令 [英] Trying to convert jquery plugin to Angular Directive

问题描述

在一个循环中，我有：

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

哪些循环了吧codeS的负载。我已经静态加入吧code值，但其目的是为这个通过添加{{酒吧codeNumber}}

Which loops out a load of barcodes. I've statically added the barcode-value, but the intention is for this to be added via {{barcodeNumber}}

我已经找到了一个非常好的插件 https://github.com/joushx/jQuery.EAN13 这一个数字转换为酒吧code。

I've found a really nice plugin https://github.com/joushx/jQuery.EAN13 which converts a number to a barcode.

随着各种教程中，我写了下面的指令（虽然我不太得到如何或为何尚未）。我还包含上面的jQuery角，后角的插件。

Following various tutorials, I've written the following Directive (although I don't quite get the HOW or WHY as yet). I've also included jquery above Angular, and the plugin after 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的调试显示以下错误：

The console.log works - but then the bit where I call the plugin doesn't... Chrome debug displays the following error:

类型错误：对象9002236311036没有方法'分裂'

TypeError: Object 9002236311036 has no method 'split'

我不知道我在做什么错了 - 看了很多论坛的帖子，但不能完全神交它

I'm not sure what I'm doing wrong - have read lots of forum posts, but can't quite grok it.

谢谢，
罗布

编辑 - 添加的toString（）努力 - 从旧金山的帖子下面下面就。唯一的一点是，我不知道为什么/这是如何工作的。

Edit - following on from Francisco's post below - adding toString() has worked. Only thing is, I don't know why / how this is working.

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());
  }
}
});

所以我做了一个小的重构：

So I've done a little refactoring:

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 2） - 范围内设置栏code值



然后在我的HTML，我说：

Then in my html, I added:

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

这是它错误...酒吧code值。以前是硬和工作...现在我试图把它的循环，它没有。

And this is where it errors... the barcode-value. Before it was hardwired and worked... now I try to put it in the loop, it doesn't.

编辑...

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

删除大括号的工作....嗯......我需要一个手动...

Removing the curly brackets worked.... hmm... I need to get a manual...

推荐答案

指令是扩展HTML的一种方式。这样做背后的整个目的是AngularJS鼓励让所有DOM操作控制器之外，使他们成为测试。

Directives are a way to extend HTML. The whole purpose behind doing this is that AngularJS encourages to keep all DOM manipulation outside of controllers so they become testable.

我不会进入细节指令究竟是如何工作的，这是有可能的AngularJS最强大和最令人困惑的方面两者。

I won't get into detail of how exactly directives work, it's possibly both the most powerful and most confusing aspect of AngularJS.

在短期虽然，指的是你做了什么：

In short though, referring to what you've done:

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());
        }
    };
});

这篇关于试图jQuery插件转变为角指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！