Muthukannan Kanniappan Muthukannan Kanniappan - 5 months ago 17
AngularJS Question

input file change listener in a directive doesnt update scope variable [plunker attached]

I have a directive that contains file input. On change of file input I try to update some scope variables, it doesn't update it. When the commented out timeout is uncommented scope variables are updated.

I was under the impression that angular.element .on function does the safe apply (triggering a digest). I am not sure why it requires another $timeout here to work, Could someone shed some light on this behaviour?

Problem reproduced in below plunker.
https://plnkr.co/edit/dHRInri9i21bR0gxe8q1?p=preview

app.directive('fileInput', function($timeout) {
var directive;

directive = {
restrict: 'E',
templateUrl: 'fileinput.html',
link: function(scope, element) {
element
.find('input')
.on('change', function(e) {
console.log(e);
scope.fileName = 'file name--->' + e.target.files[0].name;
/*$timeout(function(){
scope.fileSize = 'fileSize--->' + e.target.files[0].size;
});*/
});
}
};

return directive;
});


directive template:

<input type="file" id="fileUpload" accept="image/*" />
<br>
{{fileName}}
<hr>
{{fileSize}}

Answer

element.on is either using jqLite or Jquery. So using scope.$apply is valid in this case as element.on is not AngularJs aware

plunker: https://plnkr.co/edit/hohU97QmjASwat139sEV?p=preview

Comments