我应该在哪里将控制器代码放在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应用程序中

回答

相关问题