Zdarzenie "Wklej" w Angular [ngPaste]

Question

Jak wykonać funkcję na zdarzeniu "Wklej" na wejściu w Angular 1.1.5? Wiem, że jest dyrektywa ng-change dla danych wejściowych. Ale uruchamia się za każdym razem, gdy dane wejściowe się zmieniają, potrzebuję tylko raz na początku wklejania.

Przykład użycia: Mam adres URL. Chcę wykonać funkcję po wklejeniu adresu URL przez użytkownika. Użytkownik może również ręcznie wprowadzić adres URL i uruchomić funkcję, naciskając klawisz Enter.

-

Aktualizacja: Od Kątowymi 1.2.0, ngPaste jest rodowitym dyrektywa.

Answer 1

Od Angulara 1.2.0 istnieje dyrektywa ngPaste. Użyj następujący sposób:

<input type='text' ng-paste='handlePaste($event)'> 

Aby przekazać wartość od razu, zastosowanie:

<input type='text' ng-paste='handlePaste($event.clipboardData.getData('text/plain'))'> 

Answer 2

W funkcji należy użyć originalEvent

<input type="text" ng-paste="paste($event)" /> 

Funkcja:

$scope.paste = function (e) { 
    console.log(e.originalEvent.clipboardData.getData('text/plain')); 
} 

Answer 3

Chciałbym udostępnić moje rozwiązanie do obsługi przeglądarek bez interfejsu API schowka. To powinno działać na każdej przeglądarce, która obsługuje kątowe.

HTML:

<input type="text" ng-paste="copyPasted($event)"> 

JS:

$scope.copyPasted = function ($event){ 
    if(typeof $event.originalEvent.clipboardData !== "undefined"){ 
     $scope.handlePastedData($event.originalEvent.clipboardData.getData('text/plain')); 
    } else { // To support browsers without clipboard API (IE and older browsers) 
     $timeout(function(){ 
      $scope.handlePastedData(angular.element($event.currentTarget).val()); 
     }); 
    } 
}; 

Answer 4

I wprowadziły to rozwiązanie sanitize wklejony tekst z filtrem niestandardowym z tytułu bieżącego wyboru wejścia (również obsługiwany przez IE11)

JS:

vm.pasteInput = pasteInput; 

function pasteInput(ev){ 
    var pastedData =''; 
    var domElement = ev.currentTarget; 

    if(typeof ev.originalEvent.clipboardData !== "undefined"){ 
    pastedData = ev.originalEvent.clipboardData.getData('text/plain'); 
    } else if(window.clipboardData){ 
    pastedData = window.clipboardData.getData('Text'); 
    ev.returnValue = false; 
    } 

    pastedData = $filter('inputtext')(pastedData); 

    // inject in correct position between selection 
    if (document.selection) { // IE11 
    domElement.focus(); 
    var sel = document.selection.createRange(); 
    sel.text = pastedData; 
    domElement.focus(); 
    } else if (domElement.selectionStart || domElement.selectionStart === 0){ 
    var startPos = domElement.selectionStart; 
    var endPos = domElement.selectionEnd; 
    domElement.value = domElement.value.substring(0, startPos) + pastedData + domElement.value.substring(endPos, domElement.value.length); 
    domElement.focus(); 
    domElement.selectionStart = startPos + pastedData.length; 
    domElement.selectionEnd = startPos + pastedData.length; 
    } else { 
    domElement.value += pastedData; 
    domElement.focus(); 
    } 

    ev.stopPropagation(); 
    ev.preventDefault(); 

    // update model 
    vm.input.value = domElement.value; 

} 

HTML:

<input type="text" ng-model="vm.input.value" ng-paste="vm.pasteInput($event)" />