Dropzonejs与angularjs

的NG-观点我有做dropzonejs与NG-观点指令工作具体问题：Dropzonejs与angularjs

下面是我的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>

这一切工作正常，当我把悬浮窗的形式直接在index.html的，但是当我的路线与dropzonjs采用NG-观点指令它create.html上现在工作。 Dropzone表单不是处理过程，例如class不是“dropzone ng-pristine ng-valid dz-clickable”，而是“dropzone ng-pristine ng-valid”，没有添加消息的div等。

任何人都有任何想法？

来源

2014-09-05 user3225361

不能让方法的下降很好地工作，事实上。它似乎是唯一有涉及的观点。

确保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); 
    } 
});

这将立即更改图像源，一旦文件被上传和服务器响应。我希望角度更友好，有人会毫无疑问地指出一个更好的解决方案，所以如果这从大师得到的回应，那么我们都赢了。否则，这将做你正在尝试做的事情。

Oh和刚刚确认，没有对HTML定义没有悬浮窗类/元件，它只是具有my-dropzone

来源

2015-03-23 23:58:12 rbnzdave

还一个id一个div，所述'myDropzone.removeAllFiles（真）;'心不是以除去单独的缩略图，多数民众赞成谨慎选择传递给下拉初始化对象，但名称和图标等仍然落后，当我尝试了它。这消除了它们。在其他任何事件中删除它们都会停止上传过程，因此被闪烁卡住。有可能更优雅的做法，但我现在只用了几个月。 – rbnzdave 2015-03-25 01:29:28

Dropzonejs与angularjs

回答

相关问题