AngularJS : 이미지 목록을 표시하는 방법 (끌어서 놓기를 통해)

Question

나는 이미지 목록을 표시하는 방법을 궁금합니다. 드래그 앤 드롭 부분에 대한 지침이 이미 있습니다. 하지만 내 응용 프로그램에서 "구문 분석"FileList 어떻게 부분에서 지시문에서 데이터를 전달합니까?이 작업은 컨트롤러에 있습니까?

/** 
* 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; 
      }); 
     }; 
    }) 

Answer 1

그 기준으로 다음 줄을 복용, fileList 변수 드래그 및 삭제 된 파일이 포함되어 있다는 것입니다 가정은 :

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

... 당신은 단순히 범위에 fileList 변수를 변경 지역 변수 대신 변수. 따라서 위의 코드는 당신은 위의 코드를 다음에 $scope.$apply() 기능이 필요하지 않습니다

$scope.fileList = evt.dataTransfer.files; 

을 읽을 것입니다. 대신, 파일은 이미 $scope.fileList에 있어야합니다. 그런 다음 drop-target 지시문이있는 뷰에서이 변수를 사용할 수 있습니다.