Я пытаюсь вызвать событие click элемента <input type="file"> из button.
<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>, и вызвать его событие click другими способами.
Если ваш вход и кнопка являются братьями и сестрами (и они находятся в вашем случае OP):
<input id="upload"
type="file"
ng-file-select="onFileSelect($files)"
style="display: none;">
<button type="button" uploadfile>Upload</button>
Используйте директиву для привязки щелчка кнопки к входному файлу следующим образом:
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');
};
У меня была эта же проблема, и эта скрипка - это shizzle:) Она использует директиву для правильного стиля поля файла, и вы даже можете сделать это образ или что-то еще.
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.com/images/srpr/logo3w.png' />
</div>
</div>Если вы получаете ошибки привязки $scope, убедитесь, что вы завершаете код события click в функции setTimeout.
VIEW
<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 с именем события, чтобы имитировать "click" try:
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;
};
}];
Это, на мой взгляд, лучший способ сделать это в angular. Использование jQuery для поиска элемента и запуска события не является лучшей практикой.
Я только что наткнулся на эту проблему и написал решение для тех из вас, кто использует Angular. Вы можете написать настраиваемую директиву, состоящую из контейнера, кнопки и элемента ввода с файлом типа. С помощью CSS вы помещаете ввод через настраиваемую кнопку, но с непрозрачностью 0. Вы устанавливаете высоту и ширину контейнеров точно в ширину и высоту смещения кнопки, а высота ввода и ширину - до 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, если вы используете 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;
}
Решение, как указывалось другими ответами, заключается в использовании
angular.element(element).trigger(event);
Вот пример того, как я произвольно выбираю несколько элементов 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');
});
};
Я взял ответ, отправленный Osiloke (который был самым простым и самым полным imho), и я добавил слушателя изменений событий. Прекрасно работает! Спасибо Осилоке. Если вы заинтересованы, см. Ниже:
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 Script, который представляет собой один линейный код.
document.querySelector('#id').click();
Просто добавьте 'id' в ваш HTML-элемент, например
<button id="myId1" ng-click="someFunction()"></button>
проверить состояние в коде JavaScript
if(condition) { document.querySelector('#myId1').click(); }
Я думаю, что вы немного сложнее. Вам действительно нужно вызвать щелчок на вкладке с вашей кнопки?
Я предлагаю вам применить свой стиль к вашему входу, а директива 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);
}