Trying To Convert Jquery Plugin To Angular Directive

Within a loop, I have:

Whi

Solution 1:

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.

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 = commentrestrict: '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 investigatescope: {
            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());
        }
    };
});

Solution 2:

The francisco.preller is absolutely right. Just one improvement is required. If you change

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

with

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

Not only it becomes more angularized, but it also follows the role of the 'elem' parameter, which is already a jQuery object (or jQLite, which is a jQuery subset, if jQuery is not loaded). Any use of direct DOM manipulation is said to be a bad practice by Google, as it could not always be reflected in Angular's digest cycle and will cause unexpected behavior.

Solution 3:

Trying to get something similar to work with no success..the barcode will just not display..do you have all your code on github to use?

Solution 4:

Using this library for the barcode: 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());
  }
}
});

and

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

and if I recall correctly - any number you pump in gets converted to the barcode (although its been over a year since I did this... )

Hope this helps