简体   繁体   中英

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. 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. That's what makes your application an Angular application. Also, to make the JS file control the HTML, you use ngController directive. Finally, the name assigned to ngApp directive and ngController directive in your HTML and JS must be the same. I hope this solved your problem.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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