4

Возникла проблема с созданием 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 объектов.

14
  • вот тут как раз такой случай, когда надо привести минимальный рабочий пример например на plunkr или jsfiddle :-)
    – Grundy
    17 дек 2015 в 11:55
  • в принципе могу предложить теоретический ответ без проверки, но он может не сработать, или сработать не так :-) кстати, на сколько я понимаю, вы еще и angularjs используете?
    – Grundy
    17 дек 2015 в 11:56
  • кстати, а зачем каждый раз на focus лезть в templateRequest? у вас может поменяться datePickerService.datePickerTemplate?
    – Grundy
    17 дек 2015 в 12:05
  • Grundy, не уверена, что в jsfiddle воспроизведется проблема, потому что даже в приложении проблема только при переключении из неполноэкранного другого приложения. Приведенный код писала не я, template не меняется. Буду рада любому даже теоретическому совету, потому что пытаюсь в focus сделать resolve для созданного deferred объекта, но в blur его свойство isresolved все время undefined.
    – Serenix
    17 дек 2015 в 12:22
  • 1
    итак, первое - Promise вещь одноразовая, если один раз сказали resolve то на любой следующей проверке он будет resolve
    – Grundy
    17 дек 2015 в 12:50

1 ответ 1

1

Так как рабочего примера нет, можно рассуждать только теоретически:

  1. Так как шаблон не меняется, его не нужно подгружать не только на каждый фокус, но и на каждый link. Следовательно, его можно вынести из функции и результат, а он является promise, сохранить в переменной:

    var templatePromise = $templateRequest(datePickerService.datePickerTemplate);
    
  2. Далее, функция 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();
            });
        });
    }
    
1
  • Спасибо, оптимизирую. Вопрос закрыт.
    – Serenix
    18 дек 2015 в 13:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.