angularjs - Angularjs+Typescsript：上传文件的最佳方法（使用控制器语法）

Question

我在下面有一个工作示例，但我认为这不是正确的方法！

我的要求是：

• 我不想使用外部插件！
• 使用控制器语法
• 使用打字稿

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();
            });
        }
    }
}

最后一点：

• in uploadFile():this被引用，$scope所以我必须以某种方式传递控制器实例才能访问MessageUploadand 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至少）。所以你不能只使用标准的事件处理程序来做事。

我不想使用外部插件！

当然。然后从任意数量的已编写插件中复制代码。