我應該在哪裏將控制器代碼放在angularjs應用程序中

我剛開始學習angularjs和nodejs。我正嘗試構建一個使用fabric.js上傳圖片並對其進行編輯的應用程序。我在這裏看到了link，第二個答案真的很有幫助。我應該在哪裏將控制器代碼放在angularjs應用程序中

但是，當我試圖在我自己的應用程序中實現它時，我遇到了問題。我使用angular tutorial作爲應用程序。在我自己的應用程序中，我知道我應該把index.html中鏈接問題的代碼的最後一部分放到style.css中。然而，我不知道該把代碼的第一部分放在哪裏，從我以前的extJS經驗中我知道它應該是一個控制器。

我試圖在index.html的同一目錄下創建一個名爲controller.js的新文件，將代碼粘貼到該腳本標記的index.html中，但它不起作用。

這裏是我想實現

var canvas = new fabric.Canvas('canvas'); 
document.getElementById('file').addEventListener("change", function (e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 
    reader.onload = function (f) { 
    var data = f.target.result;      
    fabric.Image.fromURL(data, function (img) { 
     var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     var a = canvas.setActiveObject(oImg); 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
    }); 
    }; 
    reader.readAsDataURL(file); 
});

來源

2016-10-04 n4feng

或者，也許它不是關於腳本。我在開發人員模式下檢查了網頁，發現document.getElementById（'file'）在我的應用程序中返回null。 – n4feng

這是真的不清楚你在這裏問什麼。另外，你是否想要在Angular 1或Angular 2中做到這一點？您發佈了Angular 1的標籤，但您的鏈接是Angular 2教程。 – Claies

我的不好。已將其更改爲Angular 2 – n4feng

你不需要的FileReader的js代碼，只需要調用createObjectURL

var canvas = new fabric.Canvas('canvas'); 
document.getElementById('file').addEventListener("change", function (e) { 
    var file = e.target.files[0]; 
    var url = URL.createObjectURL(file); 
    fabric.Image.fromURL(url, function (img) { 
     var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9); 
     canvas.add(oImg).renderAll(); 
     var a = canvas.setActiveObject(oImg); 
     var dataURL = canvas.toDataURL({format: 'png', quality: 0.8}); 
    }); 
});

來源

2016-10-05 13:19:01 Endless

當然。這是一個非常好的建議。由於我剛剛發現我的錯誤甚至在這些代碼中都沒有發生，因此我只是想將您的帖子作爲答案。 – n4feng

我發現，我做錯了。這些後端代碼沒有任何問題，它在index.html中，我在錯誤的地方編寫了控制器，導致了麻煩。我已經解決了。

來源

2016-10-07 21:58:54 n4feng

我應該在哪裏將控制器代碼放在angularjs應用程序中

回答

相關問題