angularjs 文件读取器 return 未定义

Question

我似乎无法从上传文件中获取文本字符串。在它用于我的控制器之前。不知何故，它停止工作并且 console.log($scope.importFile) 显示 'undefined'。我对处理文件上传和 angularjs 都不熟悉。你能帮忙查明哪里出了问题吗？

我的指令和控制器以及 HTML:

app.directive('fileReader', function() {
  return {
    scope: {
      fileReader:"="
    },
    link: function(scope, element) {
      $(element).on('change', function(changeEvent) {
        var files = changeEvent.target.files;
        //console.log(files.length);
        
        if (files.length) {
          var r = new FileReader();
          r.onload = function(e) {
              var contents = e.target.result;
              scope.$apply(function () {
                scope.fileReader = contents;
              });
              //console.log(scope.fileReader + ' in onload');
              //r.readAsText(files[0]);
          };
          console.log('using file-reader directive');
          console.log(r.readAsText(files[0]));
          r.readAsText(files[0]);
        }
      });
    }
  };
});



app.controller('NavController', function($scope, $location, $modal, toaster) {
  
  $scope.selectFile = function () {
      console.log('print upload: '+ $scope.importFile );
      alert('print upload: '+ $scope.importFile);
  };
};

<div class="form-group">             
   <input type="file" file-reader="importFile" class="form-control"/><br>      
 </div>     
 
<div class="form-group">
 <label>
   <input class="pull-left text-left col-sm-1 control-label" type="checkbox" ng-model="confirmDeleteMode">
     <span class="glyphicon glyphicon-trash col-sm-10 pull-left text-left">
       <em style="color:red">By checking this box, I understand....</em>
     </span>  
  </label>
</div>
         
<div class="form-group">       
   <input type="button" value="Upload File" class="btn btn-inverse" ng-click="selectFile()" ng-disabled="!confirmDeleteMode">
         
  <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
</div>

Answer 1

首先，你的 JavaScript

的最后一行存在语法错误

app.controller('NavController', function($scope, $location, $modal, toaster) {

  $scope.selectFile = function () {
      console.log('print upload: '+ $scope.importFile );
      alert('print upload: '+ $scope.importFile);
  };
};

您忘记关闭括号的地方。 JavaScript 控制台应该会通知您。

app.controller('NavController', function($scope, $location, $modal, toaster) {

  $scope.selectFile = function () {
      console.log('print upload: '+ $scope.importFile );
      alert('print upload: '+ $scope.importFile);
  };
}); // <- Here

其次，尽管没关系，$(element) 是多余的。 AngularJS 提供了一个模仿 jQuery 的严格精简的实现，称为 jqLite。看到here. That's a lot like jQuery, but not really. (There actually are significant behavior differences even in supported features. So be careful with that.) All elements given by AngularJS are already wrapped in jqLite. Furthermore, if you really want jQuery, simply import jQuery before AngularJS and AngularJS will pick it up and use jQuery instead of its jqLite. So here element is already wrapped in jQuery. Another word of caution, AngularJS 2.0 is going to completely drop the whole jqLite thing，因为DOM这年头已经够厉害了

否则一切正常。参见 Fiddle

angularjs 文件读取器 return 未定义

angularjs FileReader return undefined

javascript

angularjs

filereader