Javascript 在$mdDialog关闭后调用单击事件文件输入
在关闭$mdDialog后,我遇到一个奇怪的行为,试图通过使用他的click事件来调用文件输入 当我在不使用$mdDialog的情况下调用click事件时,一切正常,但使用该对话框时,上载文件choose popup从不显示 Html代码Javascript 在$mdDialog关闭后调用单击事件文件输入,javascript,angularjs,angular-material,Javascript,Angularjs,Angular Material,在关闭$mdDialog后,我遇到一个奇怪的行为,试图通过使用他的click事件来调用文件输入 当我在不使用$mdDialog的情况下调用click事件时,一切正常,但使用该对话框时,上载文件choose popup从不显示 Html代码 <input type="file" id="file" ng-hide="true" /> <button ng-click="tryUploadFile($event)" /> $scope.tryUploadFile = fu
<input type="file" id="file" ng-hide="true" />
<button ng-click="tryUploadFile($event)" />
$scope.tryUploadFile = function(event) {
upload(angular.element(document.body), 'Upload file', 'Cancel', event);
}
function upload(_parent, _okText, _cancelText, _event) {
if($scope.hasCurrentChanges) {
confirm = $mdDialog.confirm()
.parent(_parent)
.title('Are you sure you want to update?')
.content('This item is already in use, updates maybe change its behavior.')
.ariaLabel('Update')
.ok(_okText)
.cancel(_cancelText)
.targetEvent(_event);
$mdDialog.show(confirm).then(openFileChooser);
}
else {
openFileChooser();
}
}
function openFileChooser() {
console.log("invoked");
// Opens the file selector
angular.element(document.querySelector('#file')).click();
}
当转到else时,一切正常,但当对话框显示以确认用户操作时,文件输入不会显示
PS:在这两种情况下都正确调用了函数openFileChooser。我将console.log放入其中以确保
有人知道为什么会这样吗
谢谢大家。原因是,出于安全考虑,如果调用文件输入的.click()是从真实的click事件发生的,浏览器将仅对该文件输入执行.click()操作。如果要使用mdDialog,而不是使用确认mdDialog,则需要使用带有自定义操作“确定/确认”按钮的自定义mdDialog来启动。单击() 大致如下:
$scope.ShowConfirm = function (ev) {
$mdDialog.show({
controller: DialogController,
template: '\
<md-dialog aria-label="Confirm" ng-cloak>\
<md-dialog-content>\
<div class="md-dialog-content">\
<p>continue?</p>\
</div>\
</md-dialog-content>\
<md-dialog-actions layout="row">\
<span flex></span>\
<md-button ng-click="cancel()">\
Cancel\
</md-button>\
<md-button ng-click="open()" style="margin-right:20px;">\
OK\
</md-button>\
</md-dialog-actions>\
</md-dialog>\
',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: false
})
};
function DialogController($scope, $mdDialog) {
$scope.cancel = function () {
$mdDialog.cancel();
};
$scope.open = function () {
$mdDialog.cancel();
document.getElementById('inputDialog').click();
};
}
$scope.ShowConfirm=功能(ev){
$mdDialog.show({
控制器:对话框控制器,
模板:'\
\
\
\
是否继续?\
\
\
\
\
\
取消\
\
\
嗯\
\
\
\
',
父元素:angular.element(document.body),
目标事件:ev,
单击外部以关闭:true,
全屏显示:错误
})
};
函数DialogController($scope,$mdDialog){
$scope.cancel=函数(){
$mdDialog.cancel();
};
$scope.open=函数(){
$mdDialog.cancel();
document.getElementById('inputDialog')。单击();
};
}