Angularjs+Typescsript: лучший подход для загрузки файла (с использованием синтаксиса controlleras)

Question

У меня есть рабочий пример ниже, но я думаю, что это не правильный подход!

Мои требования:

• Я не хочу использовать внешние плагины!
• Используйте синтаксис контроллеров
• Используйте Typescript

Html:

<input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)" />

контроллер:

module Test {
    export class TestController {
        MessageUpload: string;
        vm: any;

        static $inject = [ 'Factory','$state', '$scope'];

        constructor(private Factory:IFactory, private $state: ng.ui.IStateService, private $scope: any) {
            $scope.vm = this;
            $scope.uploadFile = this.uploadFile;
            this.vm = this;
        }

        /* ... */
        /* ... */
        /* ... */

        get(){/* .... */}

        uploadFile(files) {
            this.vm.MessageUpload = 'Uploading file. Please wait...';
            var fd = new FormData();
            fd.append('file', files[0]);

            this.vm.Factory.upload(fd).then((r) => {
                this.vm.MessageUpload = 'Completed ...';
                this.vm.get();
            });
        }
    }
}

Последнее примечание:

• в uploadFile(): this ссылается на $scope так что я должен передать экземпляр контроллера как-то, чтобы иметь возможность доступа MessageUpload а также get(), Даже в get() функция this ссылается на $scope,

Кто-нибудь знает, как это сделать, чтобы добиться загрузки и использования? this как ссылка на контроллер.

Answer 1

Замените строку: $scope.uploadfile = this.uploadFile;

С помощью: $ scope.uploadFile = (file): void => this.uploadFile (file);

* это как назначить функцию для области *

Удалить строку: this.vm = this;

Answer 2

onchange

Есть угловой мир ($digest) и есть внешний мир (в v1 по крайней мере). Таким образом, вы не можете просто использовать стандартный обработчик событий, чтобы делать вещи.

Я не хочу использовать внешние плагины!

Конечно. Затем скопируйте код из любого количества уже написанных плагинов.