D'entrée de déclenchement fichier cliquez sur l'événement en AngularJS

Je suis en train d'essayer d'émuler un événement de clic sur un fichier d'entrée dans AngularJS. J'ai vu travail jQuery exemples, mais je ne veux pas utiliser jQuery.

JS:

'use strict';

angular.module('MyApp', []).

controller('MyCtrl', function($scope) {
  $scope.click = function() {
    setTimeout(function() {
      var element = angular.element(document.getElementById('input'));
      element.triggerHandler('click');
      $scope.clicked = true;
    }, 0);
  };
});

HTML:

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
  <input id="input" type="file"/>
  <button ng-click="click()">Click me!</button>
  <div ng-if="clicked">Clicked</div>
</div>

Note: Pour une raison quelconque, le bouton doit être pressé deux fois pour déclencher la fonction de délai.

Je suis en utilisant setTimeout en raison de ce post.

Comment I du programme, cliquez sur un fichier d'entrée avec juste AngularJS /vanille JavaScript?

  • Le code en question ainsi que la réponse proposée est bien connu, les anti-modèle en Angular.js - ne pas faire de manipulation du DOM dans vos contrôleurs, sauf si c'est dans une directive du contrôleur.
InformationsquelleAutor Remco Haszing | 2015-02-27
  1. 39

    Vous pouvez simplement utiliser

     <button type="button" onclick="document.getElementById('input').click()">Click me!</button>

    OU

    $scope.click = function() {
    setTimeout(function() {
        document.getElementById('input').click()
        $scope.clicked = true;
    }, 0);
};
    • Salut, parfois, il est ouvert à de multiples reprises, aucun moyen d'empêcher ça ?
    • Je suis sûr que @LiadLivnat déjà résolu son problème, mais juste au cas où quelqu'un tombe sur ce et a le même problème; Ce qui se passe quand vous mettez le <input> à l'intérieur de l'élément qui est censé déclencher le clic sur entrée. <div onClick="document.getElementById('input').click()"><input/></div> va déclencher infini clics sur cet élément. <input/><div onClick="document.getElementById('input').click()"></div> fonctionne très bien 🙂
    InformationsquelleAutor Satpal
  2. 0

    Voici comment déclencheur fichier de type 'fichier' ou ouvert, sélectionnez fichier de la fenêtre de lors d'un clic sur l'icône, le bouton ou la durée que vous le souhaitez 😉

    css : 

    .attachImageForCommentsIcon{
  padding-top: 14px;
  padding-right: 6px;
  outline:none;
  cursor:pointer;
}

    HTML :

    <input id="myInput" type="file" style="visibility:hidden" ng-file-model=""/>
<i onclick="$('#myInput').click();" class="attachImageForCommentsIcon blue-2 right-position material-icons">image</i>

    tous les crédits en va de cette réponse :
    https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

    Ainsi, nous personnalisé fichier balise d'entrée à l'aide de cette façon.

    • Qui ressemble à jQuery (OP ne veut pas utiliser jQuery).
    InformationsquelleAutor Abdallah Okasha