试图jQuery插件转变为角指令

本文介绍了试图jQuery插件转变为角指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在一个循环中，我有：

<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}}

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

I've found a really nice plugin github/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()); } }; });