Kích hoạt sự kiện nhấp vào tệp đầu vào trong AngularJS

Question

Tôi đang cố gắng mô phỏng sự kiện nhấp chuột trên đầu vào tệp trong AngularJS. Tôi đã thấy working jQuery examples, nhưng tôi không muốn sử dụng jQuery.

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

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

Lưu ý: Đối với một số lý do nút cần được nhấn hai lần để kích hoạt các chức năng thời gian chờ.

Tôi đang sử dụng setTimeout vì this post.

Làm cách nào để nhấp vào một đầu vào tệp theo cách lập trình chỉ với JavaScript AngularJS/vanilla?

Answer 1

Bạn chỉ có thể sử dụng

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

HOẶC

$scope.click = function() { 
    setTimeout(function() { 
     document.getElementById('input').click() 
     $scope.clicked = true; 
    }, 0); 
}; 

Answer 2

Dưới đây là làm thế nào để tập tin kích hoạt của loại 'file' hoặc mở cửa sổ chọn file khi nhấp chuột vào biểu tượng, nút hoặc span như bạn muốn;)

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> 

tất cả các khoản tín dụng đi cho câu trả lời này: https://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box

Do đó, chúng tôi tùy chỉnh thẻ đầu vào tập tin sử dụng theo cách này.