如何使用angularjs在ng-click中触发另一个元素的click事件？
我试图从button触发<input type="file">元素的单击事件。
<input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" ng-click="angular.element('#upload').trigger('click');">Upload</button>
它通常的做法是隐藏被称为<input type=file>的丑陋野兽，并通过其他方式触发它的点击事件。
如果你的input和button是兄弟姐妹（他们在你的情况OP）：
<input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" uploadfile>Upload</button>
使用指令将button的点击与文件input绑定，如下所示：
app.directive('uploadfile', function () { return { restrict: 'A', link: function(scope, element) { element.bind('click', function(e) { angular.element(e.target).siblings('#upload').trigger('click'); }); } }; });
所以这是一个简单的修复。 只需要将ng-click移动到范围点击处理程序：
<input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" ng-click="clickUpload()">Upload</button> $scope.clickUpload = function(){ angular.element('#upload').trigger('click'); };
我有这个相同的问题，这个小提琴是嘶嘶声:)它使用一个指令正确的风格的文件字段，你甚至可以使它成为一个图像或任何东西。
http://jsfiddle.net/stereosteve/v5Rdc/7/
/*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) } } })
<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.comhttp://img.dovov.comsrpr/logo3w.png' /> </div> </div>
如果您正在获取$ scope binding错误，请确保您将click事件代码包装在setTimeout函数中。
视图
<input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" ng-click="clickUpload()">Upload</button>
CONTROLLER
$scope.clickUpload = function(){ setTimeout(function () { angular.element('#upload').trigger('click'); }, 0); };
对于jqLite只需使用triggerHandler与事件名称，来模拟一个“点击”尝试：
angular.element("tr").triggerHandler("click");
只需将它们放在同一个控制器中，然后执行如下操作：
HTML：
<input id="upload" type="file" ng-file-select="onFileSelect($files)" style="display: none;"> <button type="button" ng-click="startUpload()">Upload</button>
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; }; }];
在我看来，这是最好的方式。 使用jQuery来查找元素并触发事件并不是最佳实践。
我刚刚遇到了这个问题，并为您正在使用Angular的人写了一个解决scheme。 您可以编写一个由容器，button和input元素组成的自定义指令。 使用CSS，然后将input放置在自定义button上，但不透明度为0.将容器的高度和宽度设置为button的偏移宽度和高度，并将input的高度和宽度设置为容器的100％。
指令
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 }) } }; });
如果你使用的是玉，那么就是一个玉器模板
div(class="file-upload-container") button(class="file-upload-button") + input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")
如果您使用的是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>
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; }
正如其他答案指出的那样，解决scheme就是使用
angular.element(element).trigger(event);
以下是我如何随机select多个select元素的示例：
$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'); }); };
我采取了由奥西洛克（这是最简单和最完整的imho）发布的答案，我添加了一个更改事件监听器。 太棒了！ 谢谢Osiloke。 如果您有兴趣，请参阅下文：
HTML：
<div file-button> <button class='btn btn-success btn-large'>Select your awesome file</button> </div>
指示：
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); } } });
控制器：
$scope.file_button_id = "wo_files"; $scope.file_button_open = function() { alert("Files are ready!"); }
还有一个指令
HTML
<btn-file-selector/>
码
.directive('btnFileSelector',[function(){ return { restrict: 'AE', template: '<div></div>', link: function(s,e,a){ var el = angular.element(e); var button = angular.element('<button type="button" class="btn btn-default btn-upload">Add File</button>'); var fileForm = angular.element('<input type="file" style="display:none;"/>'); 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); } } }]);
最好和简单的方法来使用本地java脚本这是一个class轮代码。
document.querySelector('#id').click();
只需要添加“id”到你的html元素
button(id="myId1" ng-click="someFunction()")
检查JavaScript代码中的条件
if(condition) { document.querySelector('myId1').click(); }
我想你已经过了一些复杂的事情了。 你真的需要点击button上的input吗？
我build议你只要在input中应用正确的样式，ngFileSelect指令就会完成剩下的工作，每当提交一个文件时就调用你的onFileSelect函数：
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); }
