AngularJS: Watch Service-Eigenschaftenänderungen

Question

Ich versuche, einen einfachen Download-Fortschritt für meine App zu zeigen. Jedes Mal, wenn eine Datei heruntergeladen wurde, wird die Gesamtzahl der Downloads dem Benutzer angezeigt. Zum Beispiel Datei 1/5, 2/5, 5/5. Der Download wird von einem DownloadService mit Versprechungen durchgeführt, für jeden erfolgreichen Download wird eine Variable inkrementiert. Ich versuche, diese Nummer in einem Controller zu zeigen, aber bis jetzt bin ich nicht erfolgreich. Ich kann nur die Gesamtanzahl der Dateien anzeigen (eine weitere downloadService-Variable). Ich habe versucht, direkt auf die Variable zuzugreifen, versuchte eine $ watch() und nichts. Die einzige Möglichkeit, auf die Variable zuzugreifen, besteht darin, $ interval zu verwenden, um nach Änderungen zu suchen, aber das scheint für das, was ich benötige, Overhead zu sein. Diese

ist das, was ich habe ...

Download Service:

myApp.service('downloadService', ['$http', function($http) 
{ 
    this.numberOfDownloads = 0; 
    this.totalNumberOfDownloads = 0; 
    var self = this; 

    var downloadService = 
    { 
     downloadList: function(list) 
     { 
      self.numberOfDownloads = 0; 
      self.totalNumberOfDownloads = list.length; 

      var promise = new Promise(function(resolve, reject) 
      { 
       //(...) 

       //update preloader 
       downloadService.setDownloadStatus(self.numberOfDownloads); 

       //(...) 
      }) 
      .then(function(result) 
      { 
       return result; 
      }); 

      return promise; 
     }, 

     getDownloadStatus: function() 
     { 
      return self.numberOfDownloads; 
     }, 

     getTotalNumberOfDownloads: function() 
     { 
      return self.totalNumberOfDownloads; 
     }, 

     setDownloadStatus: function(value) 
     { 
      self.numberOfDownloads = value; 
     } 
    }; 

    return downloadService; 

}]); 

Preloader-Controller

myApp.controller('preloader', ['$scope', 'downloadService', '$interval', function($scope, downloadService, $interval) 
{ 
    $scope.downloadService = downloadService; 

    //doesn't work... 
    $scope.$watch(function() 
    { 
     return downloadService.getDownloadStatus(); 
    }, 
    function(value) 
    { 
     console.log(value); 
    }, true); 

    //works.... 
    $interval(function() 
    { 
     console.log($scope.downloadService.getDownloadStatus()); 
    }, 1000); 

}]); 

Was mache ich falsch hier? Wie kann ich das erreichen?

Answer 1

Haben Sie versucht dies:

$scope.$watch(function() 
{ 
    return $scope.downloadService.getDownloadStatus(); 
}