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方式！不要将纯Javascript与Angular混合使用。这会产生误导。 BTW。您不应在列表中使用id。我应该是独一无二的。函数document.getElementById将始终返回它使用此id找到的第一个元素。这样你就永远找不到其他元素了。

为列表中的每个项目创建条形码，angular将生成的条形码绑定到图像。

  $scope.updateBarcode = function(food) {
    var barcode = new bytescoutbarcode128();

    barcode.valueSet([food.selectedproduct,food.Quantity1,food.Quantity2].join("  "));
    barcode.setMargins(5, 5, 5, 5);
    barcode.setBarWidth(2);

    var width = barcode.getMinWidth();

    barcode.setSize(width, 100);

    food.barcodeSrc = barcode.exportToBase64(width, 100, 0);
  };

http://plnkr.co/edit/4scoibxyZ1EgJiRMex1V?p=preview

Answer 2

查看this plukr（从您的示例中分叉），并使用class而不是id：

<img class="xxx" code-index="{{$index}}">

基本上你需要的是将图像放在转发器中并找到解决它的方法。

但是既然你正在学习角度，为什么不把所有东西都变成一个组件并用ng-click而不是onclick？

Answer 3

你肯定不是这样做的角度方式：混合角度代码和plein javascript，正如你所做的那样，通常不是一个好主意。 write an custom directive将条形码库捆绑在一起是个好主意。

无论如何，您的updateBarcode函数直接从html输入字段（例如document.getElementById("barcodeValue").value）获取其值，并将其结果直接写入DOM。使用angular，您可能无法直接操作DOM，而是使用控制器的范围（例如$scope.foods）。

要解决此问题，您可以将updateBarcode函数移动到角度控制器中，并为生成的图像创建一个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>

在ANGULAR

3 个答案: