Angularjs + Typescsript：上传文件的最佳方法（使用controlleras语法）

Question

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

我的要求是：

• 我不想使用外部插件！
• 使用controlleras语法
• 使用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();
            });
        }
    }
}

最后一点：

{li} in uploadFile()：this被称为$scope所以我必须以某种方式传递控制器实例才能访问MessageUpload和get()。即使在get()函数this中也会引用$scope。

是否有人知道如何重构此内容以便能够实现上传并使用this作为控制器的参考。

Answer 1

替换该行： $ scope.uploadfile = this.uploadFile;

使用： $ scope.uploadFile =（file）：void =＆gt; this.uploadFile（文件）;

*这是将函数分配给范围*

的方法

删除该行： this.vm = this;

Answer 2

onchange

有角度世界（$digest）并且外部世界（至少在v1中）。所以你不能只使用标准的事件处理程序来做事。

  

我不想使用外部插件！

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