[AngularJS指令，用于文件输入，不更新ngmodel [重复]

Question

此问题已经在这里有了答案：

ng-model for `<input type=“file”/>` (with directive DEMO)（12个答案）

关闭7分钟前。

我有一个要在我的应用程序中用于文件上传的指令。

但是选择文件后，它不会更新控制器中的模型。

该指令如下：

export interface IFileInputModel {
    fileName: string;
    fileContent: any;
}

export class FileInput implements ng.IDirective {
    constructor() {
    }
    restrict = "EA";
    replace = true;
    template = `<input type="file" class="form-control" accept="image/*"/>`;
    scope: {
        image: '='
    };

    link = (scope, element, attrs, ctrl) => {
        let updateModel = function () {
            let file = element[0].files[0];

            let reader = new FileReader();
            reader.readAsDataURL(file);

            reader.onload = function (evnt: any) {
                let model: IFileInputModel = {
                    fileName: file.name,
                    fileContent: evnt.target.result
                };

                scope.$apply(function () {
                    scope.image = model;
                });
            };
        };

        element.bind('change', updateModel);
    }

    static factory(): ng.IDirectiveFactory {
        const directive = () => new FileInput();
        return directive;
    }
}

以及这是我在HTML中的使用方式

<file-input ng-model="controller.img"></file-input>

这将呈现有效的指令模板，但是当我选择一个文件并将其上传时，controller.img不会在控制器中更新。

我在做什么错？

注意-这是Typescript中的AngularJS 1.X应用程序。

Answer 1

[AngularJS不支持文件输入，您必须通过在输入中添加onchange事件侦听器来手动处理它：`

element[0].addEventListener('change', event => {
   const files = event.target.files;
   // etc...
});