帶有條形碼生成器的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