Eingabedatei Änderung Listener in einer Direktive nicht Scope-Variable aktualisieren [Plocker angeschlossen]

Question

Ich habe eine Direktive, die Dateieingabe enthält. Bei Änderung der Dateieingabe versuche ich einige Scope-Variablen zu aktualisieren, es wird nicht aktualisiert. Wenn das auskommentierte Zeitlimit unkommentiert ist, werden Bereichsvariablen aktualisiert.

Ich hatte den Eindruck, dass eckle.element .on-Funktion den Safe zutrifft (Auslösen eines Digest). Ich bin mir nicht sicher, warum es hier eine weitere $ Timeout-Zeit benötigt, um zu arbeiten. Könnte jemand etwas Licht auf dieses Verhalten werfen?

Problem reproduziert in unten Plotter. 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; 
}); 

Richtlinie Vorlage:

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

Answer 1

element.on wird entweder mit jqLite oder JQuery. So scope.$apply verwendet, ist in diesem Fall gilt als element.on nicht AngularJS bewusst ist

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