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：如何顯示圖像列表（通過拖放）

回答

相關問題