Angularjs 文件上传指令

Question

我正在创建一个文件上传指令以在表单中使用。

angular.module("app")
    .directive("myFileUpload", [function () {
        return {
            restrict: "E",
            template: '<input type="file" multiple class="form-control" placeholder="Select file">',
            scope: {
                files: "="
            },
            link: function (scope, element) {

                element.change(function (event) {
                    scope.files = event.target.files;
                    event.preventDefault();
                });

            }
        }
    }]);

我可以在我的应用程序的某个地方使用这个指令。

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
</div>

我想像这样列出选定的文件：

<div class="col-sm-9">
    <input ng-model="myform.title">
    <my-file-upload files="myform.files"></my-file-upload>
    <p ng-repeat="item in myform.files">{{item.filename}}</p>
</div>

如果我没有在输入 myform.title 中输入文本，则文件不会列出。

Answer 1

的回调

element.change

发生在“角度世界”之外。你需要让 Angular 知道“发生了什么事” 试试这个

element.change(function (event) {
  scope.files = event.target.files;
  event.preventDefault();
  scope.$apply();
});