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函數不能一起工作？

回答

相關問題