Angularjs debounce для нескольких событий не работает
Я просматривал документацию Angular для обработки форм и нашел очень полезный пример для захвата обновления в любом поле / элементе управления с задержкой. Ниже приведен пример кода, предоставленного Angularjs:
<input type="text" ng-model="user.name" ng-model-options="{ debounce: 250 }" /><br />
Работает нормально. Но они упомянули, что debounce
может использоваться с несколькими событиями и предоставлен другой пример, например:
<input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" /><br />
Проблема этого примера в том, что он всегда задерживает обновление независимо от того, покидаете ли вы поле / элемент управления или нет. Принимая во внимание, что в этом случае он должен немедленно обновить модель, когда пользователь покидает поле / элемент управления как debounce
0 в случае blur
,
Вот ссылка для запуска примера в Plunker.
Может кто-нибудь объяснить это поведение.
2 ответа
Я считаю, что вы стали жертвой преобразования типов Javascript, в частности, что 0
является false
, Извлеките унифицированный источник для Angular 1.3.0-beta7, строка 18305:
var debounceDelay = ctrl.$options && (isObject(ctrl.$options.debounce)
? (ctrl.$options.debounce[trigger] || ctrl.$options.debounce['default'] || 0)
: ctrl.$options.debounce) || 0;
Soif вы указали options.debounce
он попытается установить debounceDelay
первым options.debounce.blur
, как вы ожидали. Но так как это 0
(false
), он продолжается с ... || ...
в ctrl.$options.debounce['default']
, который не равен нулю (true
) и устанавливает это значение!
В качестве обходного пути вы можете указать точное имя события, которое запускает значение по умолчанию (keyup
?), или укажите небольшое, но ненулевое значение для вашей задержки, например 1:
debounce: { default: 500, blur: 1 }
Я думаю, что это должно быть подано как ошибка в Angular.
В моем случае нужно было указать updateOn
вместе с debounce
объект, вот так:
<textarea
ng-model="$ctrl.notes"
ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }">
</textarea>