8

のビューは次の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
4

3 に答える 3

3

アイデアは、ボタンを使用してファイル入力を「エミュレート」することでした。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)")
于 2013-08-22T20:56:11.217 に答える
1

この問題に遭遇したばかりで、一滴の解決策を書きました。コンテナ、ボタン、入力要素で構成されるカスタム ディレクティブをファイル型で記述できます。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
        })

      }

    };
  });

jade を使用している場合は jade テンプレート

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;
}
于 2015-05-07T21:28:08.517 に答える