Angular自定義指令調用輸入域更改的函數

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

這裏是工作fiddle