角度1.5 ES6入力ファイル変更ハンドラ

Question

私はモーダルで入力ファイルをアップロードしていますが、そのonChangeイベントを処理しようとしています。私は、このソリューションに従うことによって、入力ファイルのアップロード用のカスタムのonChangeハンドラのディレクティブを作成しました：https://stackoverflow.com/a/19647381/769326

これはES6で私のコードです：

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関数を追加して、あなたが探している範囲を取得しました。あなただけgetScopeを呼び出し、this、デフォルトで$ctrlで、あなたのコントローラの別名を、渡す必要があり、fiddleでそう

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

：それはあなたのコントローラの別名でスコープを返すために、単純な再帰関数です。

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