Попытки преобразовать Jquery плагин угловых директив

Question

В цикле, у меня есть:

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

Каких петли из нагрузки штриховых кодов. Я статически добавил значение штрих-кода, но намерение состоит в том, чтобы это было добавлено через {{barcodeNumber}}

Я нашел действительно хороший плагин https://github.com/joushx/jQuery.EAN13, который преобразует число в штрих-код.

Следуя различным учебным пособиям, я написал следующую Директиву (хотя я пока не совсем понимаю КАК или ПОЧЕМУ). Я также включил jquery выше Angular и плагин после 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 не имеет какого-либо метода «расколоть»

Я не уверен, что я делаю не так - прочитал много сообщений на форуме, но не могу это понять.

Спасибо, Роб

Edit - вслед за пост-Франциско ниже - добавление 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> 

И это, где это ошибка ... штрихкод значение. Прежде чем он работал и работал ... теперь я пытаюсь поместить его в цикл, это не так.

Edit ...

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

Answer 2

francisco.preller абсолютно прав. Требуется только одно улучшение.Если изменить

link: function (scope, elem, attrs) { 
     console.log("Recognized the barcode directive usage"); 
     $('.ean').EAN13(scope.barcodeValue.toString()); 
    } 

с

link: function (scope, elem, attrs) { 
     console.log("Recognized the barcode directive usage"); 
     elem.EAN13(scope.barcodeValue.toString()); 
    } 

не только становится более angularized, но следует также роль параметра «Элем», который уже является объектом JQuery (или jQLite, который подмножество jQuery, если jQuery не загружен). Любое использование прямого манипулирования DOM считается плохой практикой Google, так как оно не всегда может отражаться в цикле дайджеста Angular и может вызвать неожиданное поведение.

Answer 3

Попытка получить что-то похожее на работу без успеха .. штрих-код просто не отображается. У вас есть весь код на github для использования?

Answer 4

Используя эту библиотеку для штрих-кода: https://github.com/joushx/jQuery.EAN13

app.directive('ean', function() { 
return { 
    restrict: 'C', 
    scope: { 
    barcodeValue: '=' 
    }, 
    link: function (scope, elem, attr) { 
    console.log("Recognized the barcode directive usage"); 
    $(elem).EAN13(scope.barcodeValue.toString()); 
    } 
} 
}); 

и

<div class="barcode" class="thumbnail" ng-show="voucher.barcode"> 
<canvas class="ean" barcode-value="voucher.redemptionCode"> </canvas> 
</div> 

и если я правильно помню - любой номер перекачивать в конвертируется в штрих-коде (хотя его уже больше года поскольку я сделал это ...)

Надеюсь, что это поможет