Dosyayı indirmek ve yükleme ekranını göstermek için açısal js yolu $ kaynak

Question

Yükleme ekranını göstermek için Angular js kullanıyorum. Dosyayı indirmek için REST servisi dışında tüm REST servis çağrıları için çalışır. Neden çalıştığını anlıyorum çünkü indirme için $ kaynak kullanarak herhangi bir servis çağrısı yapmıyorum; Bunun yerine dosyayı indirmek için normal yaklaşımı kullanıyorum, bu nedenle Angular js kodu, hizmet isteğini başlatma/bitirme üzerinde herhangi bir kontrole sahip değil. Bu REST hizmetine isabet etmek için $ kaynak kullanmayı denedim, ancak bu hizmetten veri alıyorum ve bu durumda yükleme ekranı gayet iyi çalışıyordu, ancak bu verileri kullanıcının açısal şekilde indirmesi için nasıl kullanacağından emin değilim. Aşağıdaki gerekli detaylardır. Lütfen yardım et.

Yaklaşım 1 kullanarak iframe yaklaşım: Burada

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

Yaklaşım 2 kullanılarak $ kaynak (indirmek için ekrandaki verileri görüntülemek için nasıl emin olun) bazı fikri içindir vardır ikinci yaklaşım, indirme işlemi gerçekleştikten sonra kullanıcıya bir bağlantı sunabilir:

• With a "data url". Muhtemelen iyi bir fikir değil for large files.
• "filesystem: mydownload.zip" gibi bir URL ile, önce dosya sistemi API'sı ile dosyayı kaydetmeniz gerekir. Bu garip bir kalıptır ve indirilen nerede diğer API'larından farklı olduğunu sana katılıyorum

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

  : Bu doğru $ kaynak hizmetiyle kalıptır html5rocks

Answer 2

ilgili ilhama bulabilirsiniz Veriler bir geriçağırım işlevinde bir parametreye atanır, dolayısıyla karışıklığınız.

Parametrelerin adlarına ve durumlarına dikkat edin ve burada iki adet eşleştirmenin var olduğunu görünüz, biri arayan kişinin $ resource nesnesine ve nesnenin kendisine, diğeri ise bu nesne ile URL arasındadır. gerçek verileri indirmek için çalışmaktadır.