Like a blur processor waiting to end processing in focus



  • Problem with the creation datepicker for the field of the date. There are two processors on the field. blur and focusfocus created datepickerblur it is removed. I don't know. focus it is created by means of a deferred object.

    .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'
            }
        };
    

    And the problem is, if the date field is set, then switch to another window and then click to any place on the page other than the field of the date, there are a few things in succession: focus fields, blur fields, click On the page. The establishment picker Total focus ends later than attempt to remove it blurand it is not removed, although the focus of the top is lost. How to make the code in. blur only after completion of the code focus? I was just thinking of making an extra variable. focusEnded to determine whether the code is being implemented focusblur Organize a time-circuit cycle, but I feel that it can be made more difficult to do so with the use of deferred objects.



  • Since there is no working example, it is only theoretical:

    1. Because the template doesn't change, it doesn't need to be downloaded to every trick, but every link. Consequently, it can be removed from function and result, and it is promisekeep it in variable:

      var templatePromise = $templateRequest(datePickerService.datePickerTemplate);
      
    2. Then the function of the link, inside it, suggests that the template has already been downloaded, so that's what we do in the processor. success function then our preserved. 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();
          });
      });
      

      }




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2