Question

我从angularjs开始，我正在关注“reilly，angularJS”这本书。在那里使用文件上传文件上传blueImp的示例。

我可以上传文件，但现在我想显示一个进度条，我无法在＆＃34;进展＆＃34;中访问包含它的元素。事件。

在指令的声明中有＆＃34;元素＆＃34;从我访问容器元素的位置，然后在那里，使用进度条显示div，但progress事件无法访问＆＃34;元素＆＃34; （一个是传递两个参数，e＆amp; data）所以在文件上传过程中我无法显示该栏。我看了很多例子，但使用的方式不同于我所做的，所以他们没有为我服务。

是否可以通过＆＃34;元素＆＃34;在progress事件上运行的函数？

ecm_directives.directive('fileupload', function(){
  return {
    restrict: 'A',
    scope: {
       done: '&',
       progress: '&',
 },  
 link: function(scope, element, attrs) {
    var optionsObj = { 
       dataType: 'json'
 };  

 if (scope.done) {
    optionsObj.done = function(e, data) {
      scope.$apply(function() {
        scope.done({e: e, data: data});
      }); 
    };  
 }   

 if (scope.progress) {
    optionsObj.progress = function(e, data) {
      scope.$apply(function() {
        scope.progress({e: e, data: data});
      }); 
    };  
 }   

 //the above could easily be done in a loop, to cover
 //all API's that Fileupload provides
 element.fileupload(optionsObj);
 }   
 }
});

这是html

<div class="file-input-wrapper">

     <div class="progress-bar">
         <div class="bar"></div>
     </div>


    <button class="btn-file-input ng-binding">Subir</button>
    <input type="file" name="ccedulaCandidato" accept=".pdf, image/jpeg, image/png" data-url="/backend/documents/save/" fileupload="" 
         done="uploadFinishedGeneral(e, data)" 
         progress="uploadOnProgressGeneral(e, data)" class="ng-isolate-scope ng-scope">
    <input type="hidden" ng-model="candidateFiles.cedula.token" name="ccedulaCandidatoToken" value="" class="ng-pristine ng-valid">
</div>

一般来说就是控制

$scope.uploadOnProgressGeneral = function(e, data) {


  // In this point, i want to show progressbar but I cant access to
  // parent element from the input uploaded file

  elementParent = $(this).parents('.file-wrapper').parent();
  progressBar = elementParent.find('.progress-bar');
  bar = progressBar.find('.bar');
  bar.css('width', parseInt(data.loaded / data.total * 100, 10) + '%');
  elementParent.removeClass('error').find('.restrictions').hide();

};

使用AngularJS O'Reilly书中的进度条上传AngularJS指令文件

0 个答案: