AngularJS指令不更新ngmodel [重复]

问题描述 投票:0回答:1

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

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

该指令如下:

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

javascript angularjs angularjs-directive
1个回答
0
投票

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

element[0].addEventListener('change', event => {
   const files = event.target.files;
   // etc...
});
© www.soinside.com 2019 - 2024. All rights reserved.