javascript - 无法从 Modal 元素获取 $file，Angular JS

Question

我正在使用一个模式元素，提示用户选择要上传到网站的文件，但我似乎无法获取该文件。这是我的 HTML:

 <div class="modal-section align-left">
      <input type="file" accept='application/pdf' ng-file-select="onFileSelect($files)" file></input>
 </div>

这是我试图用来获取它的 JavaScript:

$scope.onFileSelect = ($file);

看起来这应该是一个足够简单的任务，但有些东西没有连接，我不确定是什么。我不断收到“$file 未定义”错误。

任何想法都会有帮助!谢谢!

刚刚意识到我还应该提到我在 git hub 上使用了 cheynewallace 的代码，可以在这里找到:https://github.com/cheynewallace/angular-s3-upload 尝试让我的模态元素将所选文件发送到 Amazon Web Services。我得到了他提供的版本，但无论出于何种原因，我无法让它与模态元素一起工作。

Answer 1

看起来您可能混淆了两个指令。 ng-file-select 来自danialfarid's angular-file-upload而文件指令来自cheynewallace's example你提到的。

如果您选择 cheynewallace 的，那么您可能会错过他的指令(上面链接)。查看代码，他的指令仅支持单个文件上传并将文件设置为 $scope.file 变量。在他的示例中，他使用:

<input type="file" file></input>
<a class="btn btn-primary btn-block btn-lg" ng-click="upload()">Upload</a>

你的 Controller 需要是这样的:

app.controller('myController', function($scope) {
    $scope.upload = function() {
        // do something with $scope.file
    };
});

如果您要使用 danialfarid 的指令，那么您可以删除 file来自您输入的属性。这会给你留下:

<input type="file" accept='application/pdf' ng-file-change="onFileSelect($files)"></input>

你的 Controller 需要看起来像这样:

app.controller('myController', function($scope) {
    $scope.onFileSelect = function($files) {
        // do something with $files
    };
});

警告我还没有测试过这两种方法，但我相信任何一种方法都会让您走上写入轨道。

<小时/>

更新

Here's a working plunk 。我刚刚用上面的代码做了一个快速的具体示例，但是我的第一个片段关于 ng-file-change 是错误的。 。应该是ng-file-select就像你最初那样。该 plunk 说明了这两个指令。我还添加了 ng-multiple='true' danialfarid 示例中的属性以允许选择多个文件。