AngularJS：如何显示图像列表（通过拖放）

我想知道如何显示图像列表（通过拖放）。我已经有了拖放部分的指令。 但是，在我的应用程序中，我“解析”FileList以及如何将数据从指令传递给部分？这是工作ob控制器吗？AngularJS：如何显示图像列表（通过拖放）

/** 
* Adds drag&drop functionality to a div 
* @Example: <div drop-target ng-class="{active:isHot}" class="dropzone">Drop here</div> 
*/ 
angular.module('myApp.directives'). 
    directive('dropTarget', function() { 
     return function ($scope, $element) { 

      // Drophandler passes a fileList to the controller 
      $element.bind('drop', function (evt) { 
       evt.stopPropagation(); 
       evt.preventDefault(); 

       // FileList should go to the controller/view 
       var fileList = evt.dataTransfer.files; 
       console.log(fileList); 

       $scope.$apply(function() { 
        $scope.imageList = fileList; 
       }); 

       return false; 
      }); 

      // DragOverHandler highlights the dropzone 
      $element.bind('dragover', function (evt) { 
       evt.stopPropagation(); 
       evt.preventDefault(); 

       $scope.isHot = true; 

       return evt.dataTransfer.dropEffect = "copy"; 
      }); 

      // DragOverHandler de-highlights the dropzone 
      $element.bind('dragleave', function (evt) { 
       evt.stopPropagation(); 
       evt.preventDefault(); 

       $scope.isHot = false; 
      }); 
     }; 
    })

来源

2013-06-30 fabian

您能否让我们知道上面代码中的哪个变量包含已被拖放的文件列表？它是'fileList'吗？ – callmekatootie

是的，它是fileList – fabian

那你为什么不把它绑定到'$ scope'？这是一个局部变量... – callmekatootie

假设fileList变量包含已拖放文件，也就是采取以下行作为参考：

// FileList should go to the controller/view 
var fileList = evt.dataTransfer.files;

...你只需将fileList变量更改范围变量而不是局部变量。因此，上面的代码然后读取

$scope.fileList = evt.dataTransfer.files;

你不需要遵循上面的代码$scope.$apply()功能。相反，您的文件应已存在于$scope.fileList。然后使用可以在包含drop-target指令的视图中使用此变量。

来源

2013-06-30 18:21:28 callmekatootie

谢谢，但我想在drop-target指令之外使用fileList。 – fabian

@fabian我认为你应该可以在指令之外使用它，因为你的指令并没有创建一个新的范围...... – callmekatootie

AngularJS：如何显示图像列表（通过拖放）

回答

相关问题