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

我刚刚遇到了这个问题并写了一个解决方案。您可以编写由容器，按钮和带有类型文件的输入元素组成的自定义指令。使用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;
}

如何在Angular上的文件输入上触发'click'事件？

3 个答案: