AngularJS中Kendo UI Upload的onComplete上下文绑定异常问题

你碰到的是JavaScript里典型的函数上下文绑定问题——Kendo Upload组件在触发complete事件时，会把回调函数的this指向组件自身实例，而不是你的MyController实例，所以你没法直接访问myImportantVar。下面给你几种可靠的解决办法：

方法1：使用箭头函数定义回调 #

箭头函数不会创建自己的this上下文，它会继承外层（也就是MyController实例）的this，这是ES6+里最简洁的解决方案：

class MyController{
  constructor(){
    this.myImportantVar = false;
  }
  // 用箭头函数定义回调方法
  onFilesUploadComplete = () => {
    this.myImportantVar = true; // 现在this正确指向MyController实例
  }
}

方法2：在构造函数中手动绑定this #

如果你更习惯用普通函数，可以在控制器的构造函数里用bind()方法把回调函数的this强制绑定到控制器实例上：

class MyController{
  constructor(){
    this.myImportantVar = false;
    // 将回调的this绑定到当前控制器实例
    this.onFilesUploadComplete = this.onFilesUploadComplete.bind(this);
  }
  onFilesUploadComplete(){
    this.myImportantVar = true;
  }
}

方法3：在回调中通过AngularJS的vm别名访问（备选） #

如果你不想修改控制器代码，也可以在HTML的回调里直接传递vm作为参数（不过这种方式不如前两种优雅）：

首先修改HTML标记：

<input name="files" kendo-upload type="file" k-complete="vm.onFilesUploadComplete(vm)"/>

然后调整控制器的回调函数接收参数：

class MyController{
  constructor(){
    this.myImportantVar = false;
  }
  onFilesUploadComplete(vm){
    vm.myImportantVar = true; // 通过传入的vm直接访问变量
  }
}

这三种方法都能解决你的问题，推荐优先使用方法1或方法2，它们更符合现代JavaScript的编码习惯，也能避免额外的参数传递。

内容的提问来源于stack exchange，提问作者Dimitry