Angular benutzerdefinierte Direktive ruft Funktion bei Änderung des Eingabefeldes

Question

Ich habe eine Direktive, die ein Datei-Upload-Eingabefeld auf dem DOM platziert, und ich möchte dann die Möglichkeit, eine Funktion aufzurufen, wenn diese Datei geändert wird. Wie kann ich eine On-Change-Funktion erhalten, ohne sie im Compiler-Bereich zu platzieren? Ich weiß, dass es nicht dorthin gehört, da mir gesagt wurde, dass der Compiler speicherintensiver ist und nur für Pre-Render-Sachen verwendet werden sollte.

angular.module('myApp').directive('customDirective', ['$http', function ($http) { 

    return { 
    controller() { 

    }, 
    compile(element) { 
     const $fileinput = $('<input type="file" accept=".csv">').appendTo(element); 
     return { 
     controller:() => { 
      $fileinput.on('change', (e) => { 
      // Stuff happens 
      }); 
     }, 
     link:() => { 
     }, 
     }; 
    }, 
    }; 
}]); 

Answer 1

dies stattdessen versuchen:

<p> 
    Select a file, and you should see an alert message 
</p> 

<div ng-app="myApp" ng-controller="myCtrl"> 
    <input type="file" custom-on-change="uploadFile"/> 
</div> 

var myApp = angular.module('myApp', []); 
myApp.directive('customOnChange', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var onChangeFunc = scope.$eval(attrs.customOnChange); 
     element.bind('change', onChangeFunc); 
    } 
    }; 
}); 


myApp.controller('myCtrl', function($scope) { 
    $scope.uploadFile = function(){ 
     var filename = event.target.files[0].name; 
     alert('file was selected: ' + filename); 
    }; 
}); 

hier die Arbeits fiddle