Javascript Dropzonejs带有angularjs的ng视图_Javascript_Angularjs_Dropzone.js_Ng View

Javascript Dropzonejs带有angularjs的ng视图

javascript angularjs

Javascript Dropzonejs带有angularjs的ng视图,javascript,angularjs,dropzone.js,ng-view,Javascript,Angularjs,Dropzone.js,Ng View,我在使dropzonejs与ng view指令一起工作时遇到特殊问题：下面是我的index.html： <!DOCTYPE html> <html lang="en" ng-app="Museum"> <meta charset="utf-8"> <title>Login page</title> <link rel="stylesheet" href="framework/bootstrap-3.2.0/css/bootstr

我在使dropzonejs与ng view指令一起工作时遇到特殊问题：

下面是我的index.html：

<!DOCTYPE html>
<html lang="en" ng-app="Museum">
<meta charset="utf-8">
<title>Login page</title>
<link rel="stylesheet" href="framework/bootstrap-3.2.0/css/bootstrap.css">
<script src="framework/angular-1.3.0-beta.19/angular.js"></script>
<script src="framework/angular-1.3.0-beta.19/angular-resource.js"></script>
<script src="framework/angular-1.3.0-beta.19/angular-route.js"></script>
<script src="framework/angularUI-0.11.0/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="framework/dropzone-3.10.2/dropzone.min.js"></script>
<link rel="stylesheet" href="framework/dropzone-3.10.2/css/dropzone.css">
<link rel="stylesheet" href="app.css">
<script src="app.js"></script>
<body>

   <div ng-view></div>

</body>
</html>

}])

以及我的带有dropzonejs的create.html页面：

<form action="/upload" class="dropzone" id="file-dropzone"></form>

当我将dropzone表单直接放在index.html中时，一切都很好，但当我使用ng view指令使用dropzonjs路由到create.html时，它现在就可以工作了。Dropzone窗体不是进程，例如类不是Dropzone ng pristine ng valid dz clickable，而是Dropzone ng pristine ng valid，没有添加带消息的div，等等

有人知道吗

无法让drop-in方法很好地工作，事实上。似乎只有当涉及到一种观点时才是如此

确保dropzone.js已加载，并且要放置到的区域/分区具有id

在我看来，我有一个ng init=initDropZone属性。不管在哪里，只需要在视图模板中

然后，在我的控制器中：

var myDropzone = new Dropzone("#my-dropzone",{url:'/myuploadscript.php', createImageThumbnails:false});
//I have used a success event so i can use the result from the save.
myDropzone.on("success", function(file,response) {
    //remove the thumbnail that gets chucked on the dropzone element
    myDropzone.removeAllFiles(true);
    //result is treated as a string, I've responded in json from my
    //upload script on the server.
    //{success:true, newfile:'myfilepath.jpg'}
    result = JSON.parse(response);
    if (result.success)
    {
        //I originally tried using the angular ng-src bound var,
        //shown as model.data.Image (using model instead of $scope)
        model.data.Image = "//:0";
        model.data.Image = result.newFile;
        //but this was outright ignored. like no change.
        //accepted defeat and just jqlite hacking to manually change
        //the source of the img element.
        $('#mainImg').attr("src", "/" + result.newFile);
    }
});

一旦上传了文件并且服务器做出响应，这将立即更改图像源。我希望angular更加友好，毫无疑问有人会指出更好的解决方案，所以如果这得到了一位大师的回应，那么我们都会赢。否则，这将像您试图做的那样

哦，只是确认一下，html上没有定义dropzone类/元素，它只是一个id为my dropzone的div

还有myDropzone.removeAllFilestrue；我并不是要单独删除缩略图，这需要注意传递给下拉init对象的选项，但是当我尝试它时，名称和图标等仍然保留在后面。这将删除它们。在任何其他事件中删除它们都会停止上传过程，因此会出现闪烁。可能有更优雅的方法，但我现在只使用angular几个月了。

var myDropzone = new Dropzone("#my-dropzone",{url:'/myuploadscript.php', createImageThumbnails:false});
//I have used a success event so i can use the result from the save.
myDropzone.on("success", function(file,response) {
    //remove the thumbnail that gets chucked on the dropzone element
    myDropzone.removeAllFiles(true);
    //result is treated as a string, I've responded in json from my
    //upload script on the server.
    //{success:true, newfile:'myfilepath.jpg'}
    result = JSON.parse(response);
    if (result.success)
    {
        //I originally tried using the angular ng-src bound var,
        //shown as model.data.Image (using model instead of $scope)
        model.data.Image = "//:0";
        model.data.Image = result.newFile;
        //but this was outright ignored. like no change.
        //accepted defeat and just jqlite hacking to manually change
        //the source of the img element.
        $('#mainImg').attr("src", "/" + result.newFile);
    }
});