Jak wywołać zdarzenie "kliknięcia" na wejściu do pliku w Angular?

Question

tutaj jest widok w 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') 

Błąd pojawia się:

Error: $apply already in progress 

Answer 1

Chodziło przycisk 'Emulate' wejściu plik w użyciu; Osiągnąłem to za pomocą 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 2

Zmieniłem $scope.click funkcję wywołać kliknięcie wejścia w setTimeout. To pozwala na zakończenie pierwszego $apply, a następnie wywoła inny.

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

Zauważ, że używam setTimeout, nie $timeout. $timeout będzie również znajdować się wewnątrz bloku $apply.

Answer 3

Po prostu napotkałem ten problem i napisałem kroplę w rozwiązaniu. Możesz napisać dyrektywę niestandardową złożoną z kontenera, przycisku i elementu wejściowego z plikiem tekstowym. Za pomocą CSS umieszczasz dane wejściowe nad przyciskiem niestandardowym, ale z oporem 0. Ustawiasz wysokość i szerokość kontenera dokładnie na szerokość i wysokość przesunięcia, a wysokość i szerokość wejścia na 100%.

dyrektywa

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

     } 

    }; 
    }); 

szablon jade jeśli używasz Jade

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

tego samego szablonu w html jeśli używasz 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; 
}