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;
                });
            });
        }
    }
}]);

基本上 - 我想要做的是当用户按下“打开文件”时。文件输入，它会显示一个＆＃39;这将放弃更改＆＃39;模态对话框。

如果用户按下“取消”，则不应显示文件对话框，但如果不继续保存＆＃39;或者＆＃39;保存更改并继续＆＃39;按下，然后才会显示选择文件对话框。

我希望能够将模态创建函数作为指令参数传递 - 所以我可以在打开文件对话框之前使用不同的模态。

使用示例：

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

这是一个展示我尝试做的事情的示例，以及示例问题：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();打开文件对话框（取消注释），但我不知道如何恢复“更改”＃39;事件。

是否可以手动触发更改事件？

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

在Angular中的文件对话框之前允许模态对话框

1 个答案: