ng-model nie działa z wprowadzeniem pliku

Question

Próbuję uzyskać wartość wejściową pliku i wyświetlić go w innym miejscu, poza wejściem. Używam AngularJS v1.4.8 w aplikacji.

<input type="file" ng-model="fileName" /> 
<div>{{fileName}}</div> 

To podejście działa dobrze z typem = "tekst", ale nie z typem = "plik".

Dlaczego tak jest i jak mogę rozwiązać ten problem?

Dziękujemy!

Answer 1

Ponieważ moje zadanie było dość proste, zdecydowałem się pójść inną drogą:

html:

<input type="file" file-input="files" /> 
<ul> 
    <li ng-repeat="file in files">{{file.name}}</li> 
</ul> 

JS:

.directive('fileInput', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      element.bind('change', function() { 
       $parse(attributes.fileInput) 
       .assign(scope,element[0].files) 
       scope.$apply() 
      }); 
     } 
    }; 
}]); 

Właściwie jest to rozwiązanie z this tutoriala. Zauważ, że może to również działać z wieloma plikami.

Mimo to nie ma nic złego w alternatywie Serghinho, wydaje mi się, że jest tylko łatwiejszy sposób.