1

我在使 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 等。

有人有什么想法吗？

4

1 回答 1

0

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

确保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为的divmy-dropzone

于 2015-03-23T23:58:12.387 回答