Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在$mdDialog关闭后调用单击事件文件输入_Javascript_Angularjs_Angular Material - Fatal编程技术网

Javascript 在$mdDialog关闭后调用单击事件文件输入

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

在关闭$mdDialog后,我遇到一个奇怪的行为,试图通过使用他的click事件来调用文件输入

当我在不使用$mdDialog的情况下调用click事件时,一切正常,但使用该对话框时,上载文件choose popup从不显示

Html代码

<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')。单击(); }; }