2017-08-25 2 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から変数進捗を渡す方法は?ここでは、コントローラにdirecctiveからデータを送信するための方法を使用し(http://jsfiddle.net/L8masomq/)

+0

はここhttp://jsfiddle.net/maxisam/QrCXh/ –

答えて

0

はこれを参照してください。ここで テスト要素ディレクティブで、属性がデータ・メソッド=「ctrlFnは」

は、このヘルプ、

+0

実際にこの良い例だことさ助けてくれた。ありがとう。 – funguy

関連する問題