파일을 다운로드하고 $ 리소스를 사용하여 로딩 화면을 표시하는 각도 js 방법

Question

로딩 화면을 표시하는 데 Angular js를 사용하고 있습니다. 파일을 다운로드하기 위해 REST 서비스를 제외한 모든 REST 서비스 호출에 대해 작동합니다. 다운로드를 위해 $ resource를 사용하여 서비스 호출을하지 않기 때문에 왜 작동하지 않는지 이해합니다. 대신 파일을 다운로드하기 위해 일반적인 접근법을 사용하고 있기 때문에 Angular js 코드는 서비스 요청 시작/끝 제어가 없습니다. 그러나이 서비스에서 데이터를 가져 오는 동안이 REST 서비스를 사용하기 위해 $ resource를 사용하려고 시도했지만이 경우로드하는 화면은 사용자에게이 데이터를 사용하여 각도 방식으로 다운로드하는 방법을 잘 모르는 중입니다. 다음은 필수 세부 사항입니다. 도와주세요.

접근 한 사용은 iframe 방식 : 여기

/*Download file */ 
      scope.downloadFile = function (fileId) { 
       //Show loading screen (Here loading screen works). 
       scope.loadingProjectFiles=true;     
        //File download object 
        var fileDownloadObj = new DownloadFile(); 
       //Make server call to create new File 
        fileDownloadObj.$get({ fileid: fileid }, function (response) { 
         //Q? How to use the response data to display on UI as download popup 
         //Hide loading screen 
         scope.loadingProjectFiles=false; 
        }); 

      }; 

Answer 1

/*Download file */ 
      scope.downloadFile = function (fileId) { 
       //Show loading screen. (Somehow it is not working) 
       scope.loadingProjectFiles=true; 
       var fileDownloadURL = "/api/files/" + fileId + "/download"; 
       downloadURL(fileDownloadURL); 
       //Hide loading screen 
       scope.loadingProjectFiles=false; 
      }; 

      var $idown; // Keep it outside of the function, so it's initialized once. 
      var downloadURL = function (url) { 
       if ($idown) { 
        $idown.attr('src', url); 
       } else { 
        $idown = $('<iframe>', { id: 'idown', src: url }).hide().appendTo('body'); 
       } 
      }; 

접근 방식이 사용 $ 자원 (다운로드 화면에 데이터를 표시하는 방법을 잘되지 않음) 몇 가지 아이디어가의있다 두 번째 방법은 다운로드가 완료된 후 사용자에게 링크를 제공하는 것입니다.

• With a "data url". 아마 좋은 생각이 아닙니다 for large files.
• "filesystem : mydownload.zip"과 같은 URL을 사용하려면 먼저 파일 시스템 API로 파일을 저장해야합니다. 이 이상한 패턴과 다운로드 한 다른 API의 다른 것을 나는 당신과 동의

  scope.downloadFile = function (fileId) { 
      //Show loading screen (Here loading screen works). 
      scope.loadingProjectFiles=true;     
      var FileResource = $resource('/api/files/:idParam', {idParam:'@id'}); 
      //Make server call to retrieve a file 
      var yourFile = FileResource.$get({ id: fileId }, function() { 
       //Now (inside this callback) the response data is loaded inside the yourFile variable 
       //I know it's an ugly pattern but that's what $resource is about... 
       DoSomethingWithYourFile(yourFile); 
       //Hide loading screen 
       scope.loadingProjectFiles=false; 
      }); 
  }; 
  

  : 당신이 올바른은 $ 자원 서비스 패턴 html5rocks

Answer 2

에 영감을 찾을 수 있습니다 데이터가 콜백 함수의 매개 변수에 할당되므로 혼동이 생길 수 있습니다.

매개 변수의 이름과 사례에주의를 기울여 여기에 두 개의 매핑이 포함되어 있는지 확인합니다. 하나는 $ 리소스 객체 호출자와 객체 자체 사이이고 다른 하나는이 객체와 URL 사이의 매핑입니다. 실제 데이터를 다운로드하도록 지시합니다.