$mdDialog 关闭后调用点击事件文件输入答案

【问题标题】：Invoke click event file input after $mdDialog closes$mdDialog 关闭后调用点击事件文件输入
【发布时间】：2016-05-23 20:50:10
【问题描述】：

我在关闭 $mdDialog 后尝试使用他的点击事件来调用文件输入时遇到了一个奇怪的行为。

当我在不使用 $mdDialog 的情况下调用点击事件时，一切正常，但使用对话框时，上传文件选择弹出窗口永远不会显示。

HTML 代码

<input type="file" id="file" ng-hide="true" />

<button ng-click="tryUploadFile($event)" />

JavaScript 代码

$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放进去确认一下。

有人知道为什么会这样吗？

谢谢你们。

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

原因是出于安全原因，如果 .click() 的调用发生在真正的点击事件中，浏览器只会对文件输入执行 .click()。如果您想使用 mdDialog，而不是使用确认 mdDialog，您需要使用带有自定义操作“确定/确认”按钮的自定义 mdDialog 来触发您的 .click()。

类似的东西：

$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();
        };
    }

【讨论】：