Angular 1.5 ES6 Eingabedatei Änderung Handler

Question

Ich habe ein Eingabedatei-Upload in einem Modal und ich versuche, das OnChange-Ereignis zu behandeln. Ich habe eine Richtlinie für die benutzerdefinierten onChange Handler für die Eingabe-Datei-Upload durch diese Lösung folgenden: https://stackoverflow.com/a/19647381/769326

Dies ist mein Code in 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 
    }); 

Allerdings, wenn ich eine Datei auswählen, um den Wert von this wenn Ich log es in doSomething ist das Eingabeelement und nicht der Controller. Wie übergebe ich den Controller-Kontext an den ChangeHandler? Vielen Dank.

Auch hier ist ein fiddle.

Answer 1

Okay, also habe ich im Grunde, was in der SO-Link in meiner Frage war, aber eine getScope Funktion hinzugefügt, nun, bekommen Sie den Umfang, den Sie suchen. Es ist eine einfache rekursive Funktion, den Umfang mit dem Controller alias zurückzukehren:

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

So in den fiddle, die Sie gerade getScope und this und den Controller alias passieren nennen müssen, die standardmäßig $ctrl ist.

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