Angularjs: введення [текст] ngChange спрацьовує під час зміни значення

ngChange спрацьовує, коли значення змінюється (ngChange не є подібним до класичної події onChange). Як я можу прив'язати класичну подію onChange за допомогою angularjs, яка запускатиметься лише тоді, коли вміст буде зафіксовано?

Поточне прив'язка:

<input type="text" ng-model="name" ng-change="update()" />

Цей пост показує приклад директиви, яка затримує зміни моделі на вхідні дані, доки не спрацює подія розмиття .

Ось скрипка, в якій показано, як ng-change працює з новою директивою ng-model-on-blur. Зверніть увагу, що це невелика корекція оригінальної скрипки .

Якщо ви додасте директиву до свого коду, ви зміните прив'язку до цього:

<input type="text" ng-model="name" ng-model-onblur ng-change="update()" />

Ось директива:

// override the default input to update on blur
angular.module('app', []).directive('ngModelOnblur', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1, // needed for angular 1.2.x
        link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });         
            });
        }
    };
});

Примітка: як згадує @wjin у коментарях нижче, ця функція підтримується безпосередньо в Angular 1.3 (на даний момент у бета-версії) через ngModelOptions. Докладнішу інформацію див. У документації .

Мова йде про нещодавні доповнення до AngularJS, які слугуватимуть майбутньою відповіддю (також на інше питання ).

Нові версії Angular (тепер у версії 1.3 бета-версії), AngularJS спочатку підтримує цю опцію, використовуючи ngModelOptions, як

ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"

Документи NgModelOptions

Приклад:

<input type="text" name="username"
       ng-model="user.name"
       ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />

Якщо хтось ще шукає додаткову підтримку натискання клавіш "enter", ось оновлення скрипки, надане Gloppy

Код для прив'язки натискання клавіші:

elm.bind("keydown keypress", function(event) {
    if (event.which === 13) {
        scope.$apply(function() {
            ngModelCtrl.$setViewValue(elm.val());
        });
    }
});

Для тих, хто бореться з IE8 (йому не подобається відв’язувати („введення”), я знайшов спосіб обійти його.

Введіть $ sniffer у свою директиву та використовуйте:

if($sniffer.hasEvent('input')){
    elm.unbind('input');
}

IE8 заспокоюється, якщо це зробити :)

Наскільки я знаю, ми повинні використовувати ng-change із параметром select, а у випадку з текстовим полем - ng-blur.

Не використовує $ scope. $ Watch, щоб краще відображати зміни змінної сфери?

Замінити введення за замовчуванням поведінку onChange (викликати функцію лише тоді, коли змінено фокус і значення втрати контролю)

Примітка: ngChange не схожий на класичне подія OnChange його стрілянину події в той час як значення змінюється Цією директива зберігає значення елемента , коли він отримує фокус
на розмиває він перевіряє , чи змінилося нове значення , і якщо так , то спрацьовує подія

@param {Рядок} - ім'я функції, яке буде викликано, коли має бути запущено "onChange"

@example <input my-on-change = "myFunc" ng-model = "model">

angular.module('app', []).directive('myOnChange', function () { 
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            myOnChange: '='
        },
        link: function (scope, elm, attr) {
            if (attr.type === 'radio' || attr.type === 'checkbox') {
                return;
            }
            // store value when get focus
            elm.bind('focus', function () {
                scope.value = elm.val();

            });

            // execute the event when loose focus and value was change
            elm.bind('blur', function () {
                var currentValue = elm.val();
                if (scope.value !== currentValue) {
                    if (scope.myOnChange) {
                        scope.myOnChange();
                    }
                }
            });
        }
    };
});

У мене була точно така ж проблема, і це спрацювало для мене. Додайте ng-model-updateі ng-keyupі готово! Ось документи

 <input type="text" name="userName"
         ng-model="user.name"
         ng-change="update()"
         ng-model-options="{ updateOn: 'blur' }"
         ng-keyup="cancel($event)" />