Comment puis-je déclencher l’événement click d’un autre élément dans ng-click en utilisant angularjs?

J’essaie de déclencher l’événement click de l’élément du button .

   

Il est courant de cacher la bête recouverte du nom de et de déclencher son événement click par d’autres moyens.

Si votre entrée et votre bouton sont frères (et ils sont dans votre cas OP):

   

Utilisez une directive pour lier le clic de votre bouton à l’entrée du fichier comme suit:

 app.directive('uploadfile', function () { return { ressortingct: 'A', link: function(scope, element) { element.bind('click', function(e) { angular.element(e.target).siblings('#upload').sortinggger('click'); }); } }; }); 

Donc c’était une solution simple. Il suffit de déplacer le ng-click vers un gestionnaire de clic de scope:

   $scope.clickUpload = function(){ angular.element('#upload').sortinggger('click'); }; 

J’ai eu ce même problème et ce violon est le shizzle 🙂 Il utilise une directive pour styler correctement le champ de fichier et vous pouvez même en faire une image ou autre.

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

 /*globals angular:true*/ var buttonApp = angular.module('buttonApp', []) buttonApp.directive('fileButton', function() { return { link: function(scope, element, atsortingbutes) { 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('') fileInput.css({ position: 'absolute', top: 0, left: 0, 'z-index': '2', width: '100%', height: '100%', opacity: '0', cursor: 'pointer' }) el.append(fileInput) } } }) 
 

Si vous obtenez des erreurs de liaison $ scope, veillez à envelopper le code d’événement click sur une fonction setTimeout.

VUE

   

MANETTE

 $scope.clickUpload = function(){ setTimeout(function () { angular.element('#upload').sortinggger('click'); }, 0); }; 

pour jqLite, utilisez simplement sortingggerHandler avec le nom de l’événement, pour simuler un “clic” essayez:

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

Il suffit de les avoir dans le même contrôleur et de faire quelque chose comme ceci:

HTML:

   

JS:

 var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { $scope.files = []; $scope.startUpload = function(){ for (var i = 0; i < $scope.files.length; i++) { $upload($scope.files[i]); } } $scope.onFileSelect = function($files) { $scope.files = $files; }; }]; 

C'est, à mon avis, le meilleur moyen de le faire en angle. Utiliser jQuery pour trouver l'élément et déclencher un événement n'est pas la meilleure pratique.

Je viens de trouver ce problème et j’ai écrit une solution pour ceux d’entre vous qui utilisent Angular. Vous pouvez écrire une directive personnalisée composée d’un conteneur, d’un bouton et d’un élément d’entrée avec type file. Avec CSS, vous placez la saisie sur le bouton personnalisé mais avec l’opacité 0. Vous définissez la hauteur et la largeur des conteneurs exactement comme la largeur et la hauteur du bouton et la hauteur et la largeur de l’entrée sur 100% du conteneur.

la directive

 angular.module('myCoolApp') .directive('fileButton', function () { return { templateUrl: 'components/directives/fileButton/fileButton.html', ressortingct: 'E', link: function (scope, element, atsortingbutes) { 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 de 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

 

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; } 

La solution, comme indiqué par d’autres réponses, consiste à utiliser

 angular.element(element).sortinggger(event); 

Voici un exemple de sélection aléatoire de plusieurs éléments:

 $scope.randomize = function(){ var games = [].slice.call(document.querySelectorAll('.games select')); games.forEach(function(e){ // Logically change the element (Angular won't know about this) e.selectedIndex = parseInt(Math.random() * 100, 10) < 50 ? 1 : 2; // Manually tell Angular that the DOM has changed angular.element(e).trigger('change'); }); }; 

J’ai pris la réponse affichée par Osiloke (qui était la plus simple et la plus complète) et j’ai ajouté un auditeur d’événement de changement. Fonctionne très bien! Merci Osiloke. Voir ci-dessous si vous êtes intéressé:

HTML:

  

Directif:

 app.directive('fileButton', function() { return { link: function(scope, element, atsortingbutes) { 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('') 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); } } }); 

Manette:

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

Une directive de plus

html

  

code

 .directive('btnFileSelector',[function(){ return { ressortingct: 'AE', template: '
', link: function(s,e,a){ var el = angular.element(e); var button = angular.element(''); var fileForm = angular.element(''); fileForm.on('change', function(){ // Actions after the file is selected console.log( fileForm[0].files[0].name ); }); button.bind('click',function(){ fileForm.click(); }); el.append(fileForm); el.append(button); } } }]);

moyen le plus simple et le plus simple d’utiliser le script java natif, qui est un code de ligne.

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

Ajoutez simplement ‘id’ à votre élément HTML comme

button(id="myId1" ng-click="someFunction()")

vérifier la condition dans le code javascript

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

Je pense que vous êtes un peu trop compliqué. Devez-vous vraiment déclencher un clic sur l’entrée de votre bouton?

Je vous suggère d’appliquer simplement un style approprié à votre entrée et la directive ngFileSelect fera le rest et appellera votre fonction onFileSelect chaque fois qu’un fichier est soumis:

 input.file { cursor: pointer; direction: ltr; font-size: 23px; margin: 0; opacity: 0; position: absolute; right: 0; top: 0; transform: translate(-300px, 0px) scale(4); }