AngularJS, DropzoneJS, JSON -- 上传成功刷新文件列表

Question

我有 "file manager page" 和 DropzoneJS（用于上传）和 AngularJS ng-repeat 用于显示所有保存的文件（通过 ng-controller http.gets json 文件文件列表）。

DropZoneJS 触发事件 "successfullupload"，我想刷新按角度显示的文件列表。

有什么方法可以实现这一点，或者模型是否完全错误（就我想从 dropzone 事件调用 ng-controller 函数而言）？

实际代码：

<div class="container">
 <div ng-app="" ng-controller="filesController">
  
  <input ng-model="searchText">
  
  <table class="table table-striped">
   <thead>
    <tr>
     <th>File Name</th>
     <th>File Size</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="x in files | filter:searchText | orderBy:'name' ">
     <td>{{ x.name }}</td> <td>{{ x.filesize }}</td>
    </tr>
   </tbody>
  </table>
 </div>
</div>
    <script src="js/dropzone.js"></script>
    <script>
     var myDropzone = new Dropzone("div#myId", { url: "content/uploadscript.php"});

     myDropzone.on("queuecomplete", function(progress) {
       //location.reload(); //refreshing file list
     }); 

     function filesController($scope,$http) {
         $http.get("content/files.php?list")
         .success(function(response) {$scope.files = angular.fromJson(response);  });
     }
    </script>

提前致谢

Answer 1

$scope.$on('successfullupload',function(event,data){
  $scope.list=data;
  //assuming $scope.successfullupload was broadcast, and can pass a json which contains the new list
});

我相信对事件做出反应是适合您情况的方法。

您需要将 dropzone 事件侦听器放置在您的控制器中，如下所示：

<script>
    function filesController($scope,$http) {
        $http.get("content/files.php?list")
        .success(function(response) {$scope.files = angular.fromJson(response);  });//get initial $scope.files value

var myDropzone = new Dropzone("div#myId", { url: "content/uploadscript.php"});

    myDropzone.on("queuecomplete", function(progress) {//event listener
         $http.get("content/files.php?list")
        .success(function(response) {$scope.files = angular.fromJson(response);  });//will refresh $scope.files
    });
    }
</script>

AngularJS, DropzoneJS, JSON -- 上传成功刷新文件列表

AngularJS, DropzoneJS, JSON -- refresh file list on success upload

javascript

php

json

angularjs

dropzone.js