Angular 1.5 ES6输入文件更改处理程序

Question

我有一个模式输入文件上传，我试图处理其onChange事件。 https://stackoverflow.com/a/19647381/769326

这是我在ES6代码：我按照这个解决方案中创建自定义onChange处理输入文件上传一条指令

class FileUploadOnChange { 
    constructor() { 
    this.restrict = 'A'; 
    } 

    link(scope, element, attrs) { 
    const onChangeHandler = scope.$eval(attrs.fileUploadOnChange); 
    element.bind('change', onChangeHandler); 
    } 

    static directiveFactory() { 
    FileUploadOnChange.instance = new FileUploadOnChange(); 
    return FileUploadOnChange.instance; 
    } 
} 

class MyController { 
    constructor() { 
    this.test = 'Hello, World'; 
    } 

    doSomething(e) { 
    console.log(this); 
    } 
} 

angular.module('MyApp', []) 
    .directive('fileUploadOnChange', FileUploadOnChange.directiveFactory) 
    .component('myFileUpload', { 
    template: '<input type="file" file-upload-on-change="$ctrl.doSomething">', 
    controller: MyController 
    }); 

然而，当我选择一个文件中，this当值我登录在doSomething是输入元素，而不是控制器。我如何将控制器上下文传递给changeHandler？谢谢。这个是fiddle。

Answer 1

好吧，所以我基本上做了什么在我的问题的SO链接，但增加了getScope函数，以及得到您要查找的范围。这是一个简单的递归函数与您控制器的别名返回范围：

function getScope(scope, controllerAlias) { 
    if (controllerAlias in scope) { 
    return scope[controllerAlias]; 
    } else { 
    getScope(scope.$parent, controllerAlias); 
    } 
} 

在 fiddle

所以，你只需要调用getScope，并通过this和控制器的别名，默认为$ctrl。

const scope = getScope(this, '$ctrl');