带有条形码生成器的Dynamic Grid ANGULAR

Question

我正在学习Angular。 我正在做一个应用程序：用户从一个html选择中选择，然后填写两个输入字段。在此之后，用户按更新并且条形码脚本生成具有3个参数的代码图像：第一个选择和两个输入。 （这三个由一些空格分隔）。到目前为止，没有问题。

我已经添加了添加新窗体的按钮，并且json数组正确地保存了输入。我想为每个编译的表单生成一个条形码。我能怎么做？ 这是我做的一个简单的例子：在HTML结束

http://plnkr.co/edit/hxZb6g9tkwN0zpRmOMjw?p=preview 

你可以找到条形码的脚本：

<div class="ean"> 
     <img id="barcodeImage" style="border: solid 1px black;"/> 
    <script type="text/javascript"> 
     function updateBarcode() 
     { 
       var barcode = new bytescoutbarcode128(); 
       var space= " "; 
      var value = document.getElementById("barcodeValue").value; 
      var value1 = document.getElementById("barcodeValue1").value; 
      var value2 = document.getElementById("barcodeValue2").value; 

      barcode.valueSet(value + space + value1 + space + value2); 
      barcode.setMargins(5, 5, 5, 5); 
      barcode.setBarWidth(2); 

      var width = barcode.getMinWidth(); 

      barcode.setSize(width, 100); 

      var barcodeImage = document.getElementById('barcodeImage'); 
      barcodeImage.src = barcode.exportToBase64(width, 100, 0); 
     } 
    </script> 

Answer 1

您应该创建directive（也拿看看这里 - http://www.ng-newsletter.com/posts/directives.html,http://www.sitepoint.com/practical-guide-angularjs）来生成条形码，并且将这个指令放在你的模板的ng-repeat循环中：

app.directive('barcode', function(){ 
    return{ 
    restrict: 'AE', 
    template: '<img id="barcodeImage" style="border: solid 1px black;" src="{{src}}"/>', 
    scope: { 
     food: '=' 
    }, 
    link: function($scope){ 
     $scope.$watch('food', function(food){ 
     console.log($scope.food); 
     var barcode = new bytescoutbarcode128(); 
     var space= " "; 

      barcode.valueSet([$scope.food.selectproduct, $scope.food.Quantity1, $scope.food.Quantity2].join(space)); 
      barcode.setMargins(5, 5, 5, 5); 
      barcode.setBarWidth(2); 

      var width = barcode.getMinWidth(); 

      barcode.setSize(width, 100); 

      $scope.src = barcode.exportToBase64(width, 100, 0); 
     }, true); 
    } 
    } 
}); 

http://plnkr.co/edit/z2nXgXyGi6LhSHth8ZNi?p=preview