简体   繁体   English

Angularjs和Normal Javascript函数不能一起使用吗?

[英]Angularjs and Normal Javascript functions don't work together?

The following code without the angular association is able to draw the file onto the canvas, but when I write the same code on a view for an Angular SPA, it doesn't seem to work. 以下没有角度关联的代码可以将文件绘制到画布上,但是当我在Angular SPA的视图上编写相同的代码时,它似乎不起作用。 I'm very new to angular. 我是新手。 Is this combination not allowed? 不允许这种组合吗? Or am I doing something else wrong? 还是我做错了其他事? Apologies if this question is very elementary. 如果这个问题很基础,我深表歉意。

<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>

For Angular to work on in your app, you must use ngApp directive. 为了使Angular在您的应用程序中运行,必须使用ngApp指令。 That's what makes your application an Angular application. 这就是使您的应用程序成为Angular应用程序的原因。 Also, to make the JS file control the HTML, you use ngController directive. 另外,要使JS文件控制HTML,可以使用ngController指令。 Finally, the name assigned to ngApp directive and ngController directive in your HTML and JS must be the same. 最后,在HTML和JS中分配给ngApp指令和ngController指令的名称必须相同。 I hope this solved your problem. 我希望这可以解决您的问题。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM