入力フィールドの変更時にカスタムカスタムディレクティブが呼び出されます

Question

DOMにファイルアップロード入力フィールドを配置するディレクティブがあり、そのファイルが変更されたときに関数を呼び出す必要があります。どのように変更機能をコンパイラ領域に配置せずに動作させるには？私は、コンパイラがより多くのメモリを必要とし、事前レンダリングのためだけに使用すべきだと言われているので、そこには属していません。

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

代わりにこれを試してみてください：ここ

<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); 
    }; 
}); 

は、私はあなただけNG-モデルでNG-変更を使用できると思っていた作業fiddle