javascript - 在 ANGULAR 中迭代一个函数

Question

我正在学习 Angular。我正在制作一个应用程序:用户从一个 html 选择中进行选择，然后填写两个输入字段。在此之后，用户按下更新，条形码脚本生成带有 3 个参数的代码图像:第一个选择和第二个输入。 (这三个用一些空格隔开)。到目前为止，没问题。

我添加了用于添加新表单的按钮，并且 json 数组正确保存了输入。我想为每个编译后的表格生成一个条形码。我能怎么做？这是我正在做的一个简单示例:

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

在html的末尾可以找到条形码的脚本:

<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

您绝对不是以 Angular 方式执行此操作:混合 Angular 代码和 plein javascript，正如您所做的那样，通常不是一个好主意。 write an custom directive 是个好主意它捆绑了您的条形码库。

无论如何，您的 updateBarcode 函数直接从 html 输入字段(例如 document.getElementById("barcodeValue").value)获取其值并直接写入其结果进入DOM。使用 Angular，您可能不会直接操作 DOM，而是使用 Controller 的范围(例如 $scope.foods)。

要解决此问题，您可以将 updateBarcode 函数移动到您的 Angular Controller 中，并创建一个 html 容器，其中包含生成的图像，实现如下所示:

app.controller('ProductController', function($scope,$http) {
  $scope.foods = [ { ... } ]

  ...

  $scope.updateBarcode = function() {
    ...
    angular.forEach($scope.foods, function(food) {
      var value = food.selectproduct;
      var value1 = food.Quantity1;
      var value2 = food.Quantity2;
      ...
      // here, i'm not sure the following code will work as it is. If not, you'd better use a directive and angular.element()
      // but here is the general concept... 
      var barcodeContainer = document.getElementById('barcodeContainer');
      var img = document.createElement("img");
      img.src = barcode.exportToBase64(width, 100, 0);
      barcodeContainer.appendChild(img)
    }
  }
}

然后相应地更改您的 html :

 <input type="button" value="Update" onclick="updateBarcode()" />

到:

 <input type="button" value="Update" ng-click="updateBarcode()" />

和

 <img id="barcodeImage" style="border: solid 1px black;"/>

到:

 <style type="text/css"> 
   #barcodeContainer img {
     border: solid 1px black;
   }
 </style>
 <div id="barcodeContainer">
 </div>