Le conteneur md-input affiche le contenu seulement après avoir cliqué quelque part

Question

J'utilise AngularJs 1 et Angular-Material Design. J'avais construit le conteneur md-input pour un téléchargement de fichier. Le problème est qu'après avoir sélectionné un fichier, il n'apparaît pas dans le conteneur md-input (le fichier sélectionné se trouve dans les fichiers ng). Ce n'est qu'après avoir cliqué quelque part que la valeur de l'entrée (dans ce cas, le fichier) est affichée. (De sorte que la valeur elle-même est-il vraiment si je vérifie la valeur du champ mais le nom n'apparaît pas, seulement après avoir cliqué sur)

<div class="bulk-file-container"> 
     <md-input-container> 
     <input type="file" id="file" ng-files="getFile($files)"/> 
     </md-input-container> 
</div> 

Et le css:

.bulk-file-container { 
    border-radius: 4px; 
    width: 33.03rem; 
    height: 10.33rem; 
    margin: auto; 
} 

C'est arrivé juste après l'application le md-input-container autour de l'entrée. J'ai lu que d'autres personnes avaient des problèmes similaires, cependant, aucun de leurs fixes ne m'a aidé.

Est-ce que quelqu'un sait comment résoudre ce problème?

Edit:

Je visitai le récipient md-entrée maintenant et a trouvé que dans un premier temps (après avoir sélectionné un fichier), il obtient la « mise au point md-entrée » classe et seulement après avoir cliqué sur quelque part la classe "md-input-has-value" apparaît, ce qui indique alors ma valeur.

Answer 1

Il semble que le modèle de l'élément d'entrée est uniquement affecté à l'événement "flou", c'est-à-dire qu'il perd son focus. Essayez d'ajouter de forcer la mise à jour se produire sur l'événement de changement, il sera probablement résoudre votre problème:

<input type="file" id="file" ng-files="getFile($files)" ng-model-options="{ updateOn: 'change' }"/>