#jquery #angularjs #blur #focus
Возникла проблема с созданием datepicker для поля даты. На поле висит 2 обработчика
- blur и focus, в focus создается datepicker, в blur он удаляется. Причем в focus он
создается с помощью deferred объекта.
.directive('datePicker', [ '$compile', '$document', 'datePickerService', '$templateRequest',
function ($compile, $document, datePickerService, $templateRequest) {
function link(scope, element, attrs) {
var picker = null;
var $elementFocusProcessing = $.Deferred();
element.on('focus', function (event) {
populatelimits();
prepareViewData();
var pos = angular.extend(element.offset(), { height: element[0].offsetHeight
});
$templateRequest(datePickerService.datePickerTemplate).then(function
(html) {
var template = angular.element(html);
$document.find('body').append(template);
picker = $compile(template)(scope);
picker.css({ top: pos.top + pos.height + 5, left: pos.left,
display: 'block', position: 'absolute' });
picker.on('mousedown', function (evt) {
evt.preventDefault();
});
$elementFocusProcessing.resolve();
});
});
element.on('blur', function () {
$elementFocusProcessing.then(function () {
if (picker) {
picker.remove();
picker = null;
};
$elementFocusProcessing = $.Deferred();
});
});
}
return {
restrict: 'A',
link: link,
scope : {
model: '=ngModel'
}
};
И собственно проблема: если выделить поле даты, потом переключиться на другое окно,
а затем кликнуть на любое место страницы, кроме поля даты, возникают подряд несколько
событий: focus поля, blur поля, click по странице. При этом создание picker в focus
завершается позже, чем попытка его удаления в blur, и он не удаляется, хотя фокус элемента
в тоге оказывается потерян. Как сделать так, чтобы выполнение кода в blur происходило
только после завершения выполнения кода в focus? Мне пока пришло в голову только сделать
дополнительную переменную focusEnded для определения того, идет ли выполнение кода
в focus, а в blur организовать цикл с таймаутом, но чувствую, что можно более изящно
сделать это с использованием deferred объектов.
Ответы
Ответ 1
Так как рабочего примера нет, можно рассуждать только теоретически:
Так как шаблон не меняется, его не нужно подгружать не только на каждый фокус, но
и на каждый link. Следовательно, его можно вынести из функции и результат, а он является
promise, сохранить в переменной:
var templatePromise = $templateRequest(datePickerService.datePickerTemplate);
Далее, функция link, внутри нее подразумеваем, что шаблон уже подгрузился, для этого
все остальное делаем в обработчике success функции then у нашего сохраненного templatePromise
function link(scope,element,attrs){
templatePromise.then(function(html){
//достаточно сделать всего один элемент,
// который мы будем добавлять или удалять
var template = angular.element(html);
//и добавим событие, чтобы не добавлять его каждый раз
//так как template это уже объект jqLite можно сделать так
template.on('mousedown',
function (evt) {
evt.preventDefault();
}
);
//добавляем on focus
element.on('focus', function (event) {
...
$document.find('body').append(template);
$compile(template)(scope);
//так как template это объект jqLite, то вместо picker можно использовать его
template.css(...)
...
});
//добавляем on blur
element.on('blur', function () {
//так как добавляли template, то и удалять можно его
//а так как он у нас всегда есть, то не надо проверять на null
template.remove();
});
});
}
