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

没有角度关联的以下代码能够将文件拖到画布上，但是当我在Angular SPA的视图上编写相同的代码时，它似乎不起作用。我对角度很陌生。这种组合不允许吗？还是我在做其他事情？道歉，如果这个问题是非常基本的。Angularjs和Normal Javascript函数不能一起工作？

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

来源

2016-07-15 Rishabh Sanghi

你在哪里调用'ng-app/ng-controller'？ – developer033

这会工作，但你不能把这个代码与'window.onload'放在一个角度部分，因为在这个部分被渲染之前窗口已经加载很久了。您必须将此脚本放在主索引页上，或者将其包装在一个角度指令中，该角度指令在部分视图呈现后加载它。 – Claies

@ developer033，我在加载菜单顶部栏的index.html中调用它们。 index.html文件调用'

'，路由使用view3.js完成，其中包含： _italic_ ** bold **''use strict'; angular.module（ 'myApp.view3'，[ 'ngRoute'， '对myApp']）的.config（[ '$ routeProvider'，函数（$ routeProvider）{$ routeProvider.when（ '/ VIEW3'， {view_Ctrl' }}; }]）' –

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

来源

2016-07-15 23:38:36 taiwoorogbangba

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

回答

相关问题