Tentando converter o plugin jquery para a diretiva angular
Dentro de um loop, tenho:
<div class="barcode" class="thumbnail">
<canvas class="ean" barcode-generator barcode-value="9002236311036"> </canvas>
</div>
Que faz um loop de códigos de barras. Eu adicionei estaticamente o valor do código de barras, mas a intenção é que isso seja adicionado via {{barcodeNumber}}
Eu encontrei um plugin muito legalhttps://github.com/joushx/jQuery.EAN13 que converte um número em um código de barras.
Seguindo vários tutoriais, eu escrevi a seguinte Diretriz (embora eu ainda não consiga o HOW ou WHY ainda). Eu também incluí jquery acima do Angular e o plugin depois do 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);
}
}
});
O console.log funciona - mas o bit em que eu chamo o plugin não ... O Chrome debug exibe o seguinte erro:
TypeError: Objeto 9002236311036 não possui método 'split'
Eu não tenho certeza do que estou fazendo de errado - li muitos posts no fórum, mas não consigo entender.
Obrigado Rob
Editar - seguindo na postagem de Francisco abaixo - adicionar toString () funcionou. A única coisa é, eu não sei porque / como isso está funcionando.
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());
}
}
});
Então eu fiz um pouco de refatoração:
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());
}
}
});
Eu queria limpar o meu html, então usei uma classe (restringir C?) - defina o valor do código de barras dentro do escopo.Então no meu html, eu adicionei:
<div class="barcode" class="thumbnail">
<canvas class="ean" barcode-value="{{barcode}}"> </canvas>
</div>
E é aí que erros ... o valor do código de barras. Antes de ser hardwired e trabalhou ... agora eu tento colocá-lo no circuito, isso não acontece.
Editar...
<div class="barcode" class="thumbnail">
<canvas class="ean" barcode-value="barcode"> </canvas>
</div>
Removendo as chaves funcionou .... hmm ... eu preciso pegar um manual ...