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

Question

我有一个指令，我想在我的应用程序中使用它来上传文件。

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

指令如下：

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 应用程序。

编辑

基于重复标记的问题，我将指令更改为

 export class FileInput implements ng.IDirective {
        constructor(private $parse) {
        }
        restrict = "EA";
        scope: {
            fileread: "="
        }

        link = (scope, element, attrs, ctrl) => {

            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = (loadEvent.target as any).result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });

        }
}

并尝试将其用作：

<input type="file" fileread="controller.img" file-input/>

但controller.img 永远不会在控制器中更新。

Answer 1

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

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