Событие «Вставить» в Угловом [ngPaste]

Question

Как выполнить функцию при событии «Вставить» во входном углу в угловом 1.1.5? Я знаю, есть директива ng-change для ввода. Но он срабатывает каждый раз, когда изменяется вход, мне нужно только один раз на начальной пасте.

Сценарий: У меня есть URL-адрес. Я хочу выполнить функцию после того, как пользователь вставляет URL-адрес. Пользователь также может вручную ввести URL-адрес и выполнить функцию, нажав Enter.

-

Обновление: С угловыми 1.2.0, ngPaste является уроженцем директива.

Answer 1

Начиная с Angular 1.2.0 существует директива ngPaste. Используйте следующий способ:

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

Чтобы передать значение откладывая, использование:

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

Answer 2

В функции вы должны использовать originalEvent

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

Функция:

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

Answer 3

Хотел поделиться своим решением для поддержки браузеров без API буфера обмена. Это должно работать на любом браузере, который поддерживает углы.

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

Я реализовал это решение, чтобы дезинфицировать вставленный текст с настраиваемым фильтром относительно текущего выбора входа (также поддерживается 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)" />