2017-08-25 76 views
0

我想顯示文件上傳(文件讀取器)的進度。如何通過angularjs將指令中的數據傳遞給控制器​​?

這裏是我的html:

<md-progress-linear id="file-progress-indicator" md-mode="determinate" value="{{progress}}"></md-progress-linear> 

,這裏是我的指令:

angular.module('image.directives').directive('edFileUploader', ['$parse', '$mdDialog', '$mdBottomSheet', '$timeout', 'toastr', function($parse, $mdDialog, $mdBottomSheet, $timeout, toastr) { 

    return { 
     restrict: 'A', 
     link: function($scope, el, attrs) { 
      var setter = $parse(attrs.edFileUploader)($scope); 

      $(el[0]).on('change', function(e) { 

       var reader = new FileReader(); 

        if (setter) { 
         setter(event.target.result, el); 

         if (typeof attrs.edCloseAfter !== 'undefined') { 
          $mdBottomSheet.hide(); 
         } 
        } 
       }; 

       reader.onprogress = function(data) { 
        if (data.lengthComputable) { 
         var progress = parseInt(((data.loaded/data.total) * 100), 10); 
         // $scope.progress = progress; 
        } 
       } 

       if (e.target.files[0] != undefined) { 
        reader.readAsDataURL(e.target.files[0]); 
        $scope.loading = false; 
        el.next().removeClass('loading'); 
        $scope.done = true; 
       } else { 
        $scope.loading = false; 
        el.next().removeClass('loading'); 
        $scope.done = true; 
       } 
      }); 

     } 
    } 
}]); 

如何從reader.onprogress傳遞變量的進步,使其進度條會按預期工作?

+0

這裏是很好的例子http://jsfiddle.net/maxisam/QrCXh/ –

回答

0

看到這個:(http://jsfiddle.net/L8masomq/)

在這裏我們使用的方法從direcctive將數據發送到控制器。 這裏測試是element指令和屬性是數據的方法=「ctrlFn」

可能這種幫助,

+0

這其實幫助。謝謝。 – funguy

相關問題