Question

以下没有角度关联的代码能够将文件绘制到画布上，但是当我在Angular SPA的视图上编写相同的代码时，它似乎不起作用。我对角度很新。是不允许这种组合？或者我做错了什么？如果这个问题非常简单，请道歉。

<div class ="container">   <div class="jumbotron">
    <p> <h3>Claim your token here</h3> </p>
    <p> Click a picture of the QR Code: </p>
    <!-- <p> 
      <input type="text" ng-model="tokenId">
    </p> -->
    <p>
      <input type="file" capture="camera" accept="image/*" id="camsource" name="camsource">
    </p>
    <p>
      <canvas id="qr-canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
    </p>
    <p>
    <button type="submit" class="btn btn-default" role="button" onclick="myFunction()">Decode QrCode</button>   </p>
    <p>
      <button type="submit" class="btn btn-default" role="button" ng-click="claimToken()">
        {{claimButtonText}}
      </button>
    </p>
    <p>
      <button class="btn btn-default" role="button" ng-click="goToProfile()">
        Back to Profile 
      </button>
    </p>
    <p><h6 id="qr-value"></h6></p>
    <p>{{claimTokenStatus}}</p>   </div> </div>

<script>

window.onload = function() {
    var input = document.getElementById('camsource');
    input.addEventListener('change', handleFiles, false); }

function handleFiles(e) {
    var canvas = document.getElementById('qr-canvas')
    var ctx = canvas.getContext('2d');
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.src = url;
    img.onload = function() {
        ctx.drawImage(img, 0, 0, 300, 300);    
    }    } </script>

Answer 1

要让Angular在您的应用中工作，您必须使用ngApp指令。这就是使您的应用程序成为Angular应用程序的原因。另外，要使JS文件控制HTML，请使用ngController指令。最后，HTML和JS中分配给ngApp指令和ngController指令的名称必须相同。我希望这能解决你的问题。

Angularjs和普通Javascript函数不能一起工作？

1 个答案: