Comment puis-je déclencher l'événement click d'un autre élément en ng-cliquez sur l'aide de angularjs?

Si votre entrée et le bouton sont les frères et sœurs (et ils sont dans votre cas OP):

<input id="upload"
    type="file"
    ng-file-select="onFileSelect($files)"
    style="display: none;">

<button type="button" uploadfile>Upload</button>

Utiliser une directive pour lier le clic de bouton pour le fichier d'entrée comme suit:

app.directive('uploadfile', function () {
    return {
      restrict: 'A',
      link: function(scope, element) {

        element.bind('click', function(e) {
            angular.element(e.target).siblings('#upload').trigger('click');
        });
      }
    };
});

J'ai eu ce même problème et ce violon est le shizzle 🙂 Il utilise une directive pour bien le style le champ fichier et vous pouvez même en faire une image ou quoi que ce soit.

http://jsfiddle.net/stereosteve/v5Rdc/7/

JS:

/*globals angular:true*/
var buttonApp = angular.module('buttonApp', [])

buttonApp.directive('fileButton', function() {
  return {
    link: function(scope, element, attributes) {

      var el = angular.element(element)
      var button = el.children()[0]

      el.css({
        position: 'relative',
        overflow: 'hidden',
        width: button.offsetWidth,
        height: button.offsetHeight
      })

      var fileInput = angular.element('<input type="file" multiple />')
      fileInput.css({
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': '2',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'pointer'
      })

      el.append(fileInput)


    }
  }
})

HTML:

<div ng-app="buttonApp">

  <div file-button>
    <button class='btn btn-success btn-large'>Select your awesome file</button>
  </div>

  <div file-button>
    <img src='https://www.google.com/images/srpr/logo3w.png' />
  </div>

</div>

pour jqLite suffit d'utiliser triggerHandler avec le nom de l'événement, afin De simuler un "clic", essayez:

JS:

angular.element("tr").triggerHandler("click");

Voici la liste des commandes jQLite

Je viens de tomber sur ce problème et ont rédigé une solution pour ceux d'entre vous qui utilisent Angulaire. Vous pouvez écrire une coutume directive composé d'un récipient, d'un bouton, et un élément input de type file. Avec CSS, vous placez la saisie sur le bouton personnalisé, mais avec une opacité de 0. Vous définissez les conteneurs de la hauteur et de la largeur à exactement le décalage de la largeur et de la hauteur du bouton, et l'entrée de la hauteur et de la largeur à 100% du récipient.

la directive

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

un modèle jade si vous utilisez jade

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")  

le même modèle en html si vous utilisez html

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

le css

.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}
.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

J'ai pris la réponse posté par Osiloke (ce Qui était le plus facile et le plus complet à mon humble avis) et j'ai ajouté un changement écouteur d'événement. Fonctionne très bien! Grâce Osiloke. Voir ci-dessous si vous êtes intéressés:

HTML:

  <div file-button>
        <button class='btn btn-success btn-large'>Select your awesome file</button>
   </div>

Directive:

app.directive('fileButton', function() {
  return {
    link: function(scope, element, attributes) {

      var el = angular.element(element)
      var button = el.children()[0]

      el.css({
        position: 'relative',
        overflow: 'hidden',
        width: button.offsetWidth,
        height: button.offsetHeight
      })

      var fileInput = angular.element('<input id='+scope.file_button_id+' type="file" multiple />')
      fileInput.css({
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': '2',
        width: '100%',
        height: '100%',
        opacity: '0',
        cursor: 'pointer'
      })

      el.append(fileInput)
      document.getElementById(scope.file_button_id).addEventListener('change', scope.file_button_open, false); 
    }
  }
});

Contrôleur:

$scope.file_button_id = "wo_files";    
$scope.file_button_open = function() 
{
  alert("Files are ready!");
}

meilleur et simple à utiliser natif java Script qui est une ligne de code.

document.querySelector('#id').click();

Ajoutez 'id' pour votre élément html comme

<button id="myId1" ng-click="someFunction()"></button>

vérification de l'état dans le code javascript

if(condition) {
document.querySelector('#myId1').click();
}