Rufen Sie Click-Event-Dateieingabe auf, nachdem $ mdDialog geschlossen wurde

Question

Ich stehe vor einem merkwürdigen Verhalten, wenn ich versuche, eine Dateieingabe aufzurufen, indem ich nach dem Schließen eines $ mdDialogs sein Klickereignis verwende.

Wenn ich das Click-Ereignis ohne Verwendung des $ mdDialog aufrufen, funktioniert alles gut, aber mit dem Dialog die Upload-Datei wählen Sie Popup nie anzeigen.

Html-Code

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

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

JavaScript-Code

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

Wann geht an den anderen Fall alles funktioniert gut, aber wenn der Dialog zeigt bis zu den Benutzern Betrieb der Datei-Eingabe Doesn bestätigen nicht zeigen.

PS: Die Funktion openFileChooser wird in beiden Fällen korrekt aufgerufen. Ich stelle die console.log ein, um sicherzugehen.

Jeder hat eine Idee, warum das passiert?

Danke Jungs.

Answer 1

Der Grund ist, dass Browser aus Sicherheitsgründen nur eine Aktion .click() auf eine Dateieingabe ausführen, wenn der Aufruf dieser .click() von einem echten Klick-Ereignis aufgetreten ist. Wenn Sie mdDialog verwenden möchten, müssen Sie anstelle eines bestätigenden mdDialogs einen benutzerdefinierten mdDialog mit einer benutzerdefinierten Aktion "ok/confirm" verwenden, um Ihr .click() auszulösen.

Etwas entlang der Linien von:

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