Dropzonejs 与 angularjs 的 ng-view答案

【问题标题】：Dropzonejs with ng-view of angularjsDropzonejs 与 angularjs 的 ng-view
【发布时间】：2014-10-30 01:09:22
【问题描述】：

我在让 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>

我的 app.js：

 var app = angular.module('Museum', ['ui.bootstrap', 'ngResource',      'ngRoute']).config(['$resourceProvider', function ($resourceProvider) {
// Don't strip trailing slashes from calculated URLs
$resourceProvider.defaults.stripTrailingSlashes = false;
}]).config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/login', {
        templateUrl: 'components/login/login.html',
        controller: 'Login',
        css: 'components/login/css/login.css'
    })
    .when('/create', {
        templateUrl: 'components/inventory/create.html',
        controller: 'Add'
    }
);

}]);

还有我的带有 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等。

有人知道吗？

【问题讨论】：

标签： javascript angularjs dropzone.js ng-view

【解决方案1】：

确实无法让插入方法很好地工作。似乎只有当涉及到视图时。

确保 dropzone.js 已加载，并且您要放置的区域/div 具有 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.removeAllFiles(true); 不是单独删除缩略图，这与传递给下拉初始化对象的选项有关，但是当我尝试过时，名称和图标等仍然留在后面.这将删除它们。并且在任何其他事件中删除它们都会停止上传过程，因此会卡在闪烁中。可能有更优雅的方法可以做到这一点，但我现在只使用了 Angular 几个月。