繁体   English   中英

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

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

以下没有角度关联的代码可以将文件绘制到画布上,但是当我在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>

为了使Angular在您的应用程序中运行,必须使用ngApp指令。 这就是使您的应用程序成为Angular应用程序的原因。 另外,要使JS文件控制HTML,可以使用ngController指令。 最后,在HTML和JS中分配给ngApp指令和ngController指令的名称必须相同。 我希望这可以解决您的问题。

暂无
暂无

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

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