title: Trying to make a directive that uses JsBarcode
body: <p>I'm using <a href="https://github.com/lindell/JsBarcode" rel="nofollow">https://github.com/lindell/JsBarcode</a> to try and insert a barcode onto the page using a directive like :</p>
  
  <pre><code>&lt;barcode data=studentData.pid&gt;&lt;/barcode&gt;
  </code></pre>
  
  <p>Its got the associated directive:</p>
  
  <pre><code>.directive('barcode', function () {
  return {
      restrict: 'EA',
      scope: {
              data: '='
          },
      template: '&lt;canvas id=barcode&gt;&lt;/canvas&gt;',
      link: function($scope, element, attrs, ngModel){
          canvas = element.find('canvas')
          JsBarcode(canvas[0], $scope.data);
      }
  
  };
  </code></pre>
  
  <p>})</p>
  
  <p>I've determined that the data is getting passed correctly but the JsBarcode lib is flipping out on line 46:</p>
  
  <pre><code>var encoder = new window[options.format](content);
  </code></pre>
  
  <p>I made the above a directive because I know you're never supposed to manipulate the DOM inside the controller as a best practice. Any help would be appreciated.</p>