无法从模态元素 Angular JS 获取$file

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 尝试让我的模态元素将所选文件发送到亚马逊云科技。 我得到了他提出的版本，但无论出于何种原因，我都无法让它与模态元素一起使用。

Answer 1

看起来您可能混淆了两个指令。 ng-file-select 来自 Danialfarid 的 angular-file-upload，而 file 指令来自你提到的 cheynewallace 的例子。

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

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

您的控制器需要如下所示：

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>

您的控制器需要看起来像这样：

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

警告 我还没有测试过这两种方法，但我相信这两种方法都会让你走上写作轨道。

---

更新

这是一个工作扑通。我只是用上面的代码做了一个快速的具体示例，但我的第一个片段对ng-file-change是错误的。它应该像你最初一样ng-file-select。plunk 说明了这两个指令。我还在 danialfarid 示例中添加了 ng-multiple='true' 属性以允许多个文件选择。