angularjs - 如何触发Angular中文件输入的“点击”事件？

Question

这是视图jade：

button#save-csv-btn(ng-click="click()") Export CSV
input#save-csv(style="display:none", type="file", onchange="angular.element(this).scope().saveCSVFileChanged(this)")

js：

$scope.click = ->
    # $('#save-csv').trigger('click')

我得到的错误：

Error: $apply already in progress

Answer 1

我更改了$scope.click函数以触发setTimeout. 这让第一个$apply完成，然后将触发另一个。

$scope.click = function() {
    setTimeout(function() {
        inputEl.click();
    }, 0);
}

请注意，我使用setTimeout，而不是$timeout. $timeout也将在一个$apply块内。

Answer 2

这个想法是使用按钮来“模拟”文件输入；我使用http://gregpike.net/demos/bootstrap-file-input/demo.html实现了这一点。

input#save-csv(type="file", title="Export to CSV", onchange="angular.element(this).scope().saveCSVFileChanged(this)") 

Answer 3

我刚刚遇到了这个问题，并写了一个解决方案。您可以编写由容器、按钮和类型为 file 的输入元素组成的自定义指令。然后使用 CSS 将输入放在自定义按钮上，但不透明度为 0。将容器的高度和宽度设置为按钮的偏移宽度和高度，并将输入的高度和宽度设置为容器的 100%。

指令

angular.module('myCoolApp')
  .directive('fileButton', function () {
    return {
      templateUrl: 'components/directives/fileButton/fileButton.html',
      restrict: 'E',
      link: function (scope, element, attributes) {

        var container = angular.element('.file-upload-container');
        var button = angular.element('.file-upload-button');

        container.css({
            position: 'relative',
            overflow: 'hidden',
            width: button.offsetWidth,
            height: button.offsetHeight
        })

      }

    };
  });

如果您使用玉石，则为玉石模板

div(class="file-upload-container") 
    button(class="file-upload-button") +
    input#file-upload(class="file-upload-input", type='file', onchange="doSomethingWhenFileIsSelected()")  

如果您使用的是 html，则在 html 中使用相同的模板

<div class="file-upload-container">
   <button class="file-upload-button"></button>
   <input class="file-upload-input" id="file-upload" type="file" onchange="doSomethingWhenFileIsSelected()" /> 
</div>

的CSS

.file-upload-button {
    margin-top: 40px;
    padding: 30px;
    border: 1px solid black;
    height: 100px;
    width: 100px;
    background: transparent;
    font-size: 66px;
    padding-top: 0px;
    border-radius: 5px;
    border: 2px solid rgb(255, 228, 0); 
    color: rgb(255, 228, 0);
}

.file-upload-input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}