ngИзменение стреляет, когда значение изменяется (ngChange не похож на классическое событие onChange). Как я могу связать классическое событие onChange с angularjs, которое будет срабатывать только при загрузке содержимого?
Текущая привязка:
<input type="text" ng-model="name" ng-change="update()" />
Этот пост показывает пример директивы, которая задерживает изменение модели на вход до blur срабатывает событие.
Здесь - скрипт, показывающий изменение ng, работающее с новой директивой 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 beta), AngularJS поддерживает эту опцию, используя ngModelOptions, например
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }"
Пример:
<input type="text" name="username"
ng-model="user.name"
ng-model-options="{updateOn: 'default blur', debounce: {default: 500, blur: 0} }" />
Если кто-то еще ищет дополнительную поддержку "enter" keypress, здесь обновляется fiddle, предоставляемое Gloppy
Код для привязки клавиш:
elm.bind("keydown keypress", function(event) {
if (event.which === 13) {
scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val());
});
}
});
Для тех, кто борется с IE8 (ему не нравится unbind ( "enter" ), я нашел способ обойти его.
Ввести $sniffer в свою директиву и использовать:
if($sniffer.hasEvent('input')){
elm.unbind('input');
}
IE8 успокаивается, если вы это сделаете:)
По моим сведениям, мы должны использовать ng-change с опцией select, а в текстовом поле мы должны использовать ng-blur.
Не использует $scope. $watch, чтобы лучше отражать изменения переменной области видимости?
Отменить ввод по умолчанию в режиме "Изменить" (вызывать только функцию когда фокус контроля и значение были изменены)
ПРИМЕЧАНИЕ: ngChange не похож на классическое событие onChange, которое оно запускает событие при изменении значения. Эта директива сохраняет значение элемента, когда он получает фокус
В случае размытия он проверяет, новое значение изменилось, и если это произойдет, событие@param {String} - имя функции, которое будет вызываться, когда "onChange" следует уволить
@example < введите 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, и вы хорошо пойдете! Вот docs
<input type="text" name="userName"
ng-model="user.name"
ng-change="update()"
ng-model-options="{ updateOn: 'blur' }"
ng-keyup="cancel($event)" />