Angularjs: input [text] 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 (ему не нравится unbind ('input'), я нашел способ обойти это.

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

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

IE8 успокоится, если вы сделаете это :)

Насколько мне известно, мы должны использовать ng-change с опцией выбора, а в случае текстового поля мы должны использовать ng-blur.

Разве не используется $ scope. $ Watch, чтобы лучше отразить изменения переменной области?

Переопределить входное поведение onChange по умолчанию (вызывать функцию только при изменении фокуса потери управления и значения)

ПРИМЕЧАНИЕ: ngChange не похож на классическое событие onChange, которое запускает событие при изменении значения. Эта директива сохраняет значение элемента, когда он получает фокус.
При размытии он проверяет, изменилось ли новое значение, и если да, запускает событие.

@param {String} - имя функции, которая будет вызываться при срабатывании 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)" />