Разрешить модальное диалоговое окно перед диалоговым окном файла в Angular

Question

Я хочу расширить директиву, указанную in this popular question.

.directive("fileread", [function() { 
    return { 
     scope: { 
      fileread: "=" 
     }, 
     link: function (scope, element, attributes) { 
      element.bind("change", function (changeEvent) { 
       scope.$apply(function() { 
        scope.fileread = changeEvent.target.files[0]; 
        // or all selected files: 
        // scope.fileread = changeEvent.target.files; 
       }); 
      }); 
     } 
    } 
}]); 

По сути - то, что я хочу сделать, когда пользователь нажимает на вход файл «открыть файл», он будет отображать «это будет отказаться от изменения» модальный диалог.

Если пользователь нажимает «отменить», диалоговое окно файла не должно отображаться, но если нажаты «продолжить без сохранения» или «сохранить изменения и продолжить», только тогда отобразится диалог выбора файла.

Я хочу иметь возможность передать функцию модального создания в качестве параметра директивы, поэтому перед открытием диалогового окна файла я могу использовать разные модальности.

Пример использования:

<label class="btn btn-default" for="fileOpen"> 
    Open File 
</label> 
<input 
     style="display: none" 
     type="file" 
     fileread="onFileRead" 
     id="fileOpen" 
     name='file' 
     prefn="openModal" 
/> 

‌

Вот jsfiddle, который демонстрирует то, что я пытаюсь сделать, и пример выпуска: http://jsfiddle.net/hcyj3q6q/55/

Вот полная директива я написал :

app.directive("fileread", [function() { 
    return { 
    scope: { 
     fileread: "=", 
     prefn: "="}, 
    link: function(scope, element, attributes) { 

      element.bind("click", function(event){ 
       if (scope.prefn){   // prefn is optional 
        //event.preventDefault(); 

        scope.$apply(function(){ 
         scope.prefn().then(
          function() { 
           $timeout(function(){ 
           //Resume file dialog      
           }); 
          }, 
          function() { 
           //Don't open file dialog 
          } 
         );          
        }); 
       }   
      }); 


     element.bind("change", function(changeEvent) { 

        scope.$apply(function() { 
      var file = changeEvent.target.files[0]; 

      var reader = new FileReader(); 
      reader.readAsText(file); 

      reader.onload = function(e) { 
      scope.$apply(function() { 
       var contents = e.target.result; 
       scope.fileread(contents); 
      }); 
      }; 

     }); 

     }); 

    } 
    } 
}]); 

Как есть - проблема будет заключаться в том, что модальность появляется одновременно с диалогом открытого файла.

Мы можем предотвратить открытие диалогового окна файла с помощью event.preventDefault(); (раскомментируем его), но затем я не знаю, как возобновить событие «change».

Возможно ли инициировать событие изменения вручную?

Answer 1

Вы хотите нажать на другую кнопку, а не на этикетке ввода файла. Пользователь не будет видеть ввод файла или его метку.

Затем в подтверждение модального ... триггер щелчок по вводу файла.

После использует угловое событие вещать от модального регулятора директивы

---

В директиве заменить element.bind('click... с:

scope.$on('init-file-select', function(){   
     element[0].click(); 
}); 

В модальном регуляторе изменить начало выглядеть следующим образом:

app.controller("AbandonChangesModalCtrl", function($scope, $modalInstance, $rootScope){ 

    $scope.yes = function(){ 
     // this could also be done from main controller in `result` promise callback 
     $rootScope.$broadcast('init-file-select') 
     $modalInstance.close('yes'); 
    } 

DEMO