Как настроить фокус на текстовые поля в пользовательской директиве, используемой внутри 'editableCellTemplate'?

Question

У меня есть настраиваемая директива в editableCellTemplate, и всякий раз, когда я выбираю текст, который выбирает ячейка, и когда я нажимаю «F2» или дважды щелкаю по этой ячейке, появляется пользовательская директива, но текстовое поле внутри директивы не фокусируется.

Как настроить фокус в текстовое поле внутри пользовательской директивы?

Посмотрите на колонку «Пол» в this fiddle. «TAB» и «SHIFT + TAB» последовательности не работают должным образом, смотрят на несогласованность в получении фокуса в текстовое поле в столбце «Пол».

Answer 1

Я исправил это с помощью событий, таких как фокус и размытия.

См. Решение here.

myApp.directive('focusComponent', ['uiGridConstants', 'uiGridEditConstants', 
    function(uiGridConstants, uiGridEditConstants) { 
    return { 
     require: ['?^uiGrid', '?^uiGridRenderContainer'], 
     scope: true, 
     restrict: 'E', 
     template: '<div><div>Some text</div><input type="text"></div>', 
     link: function($scope, element, attrs, controllers) { 
     console.log(element); 
     console.log(arguments); 
     setTimeout(function() { 
      angular.element($(element).children().children()[1])[0].focus(); 
      angular.element($(element).children().children()[1])[0].select(); 
     }, 10); 

     var uiGridCtrl = controllers[0]; 
     var renderContainerCtrl = controllers[1]; 

     //set focus at start of edit 
     $scope.$on(uiGridEditConstants.events.BEGIN_CELL_EDIT, function() { 
      var thisEle = angular.element($(element).children().children()[1])[0]; 
      thisEle.focus(); 
      thisEle.select(); 
      thisEle.style.width = (thisEle.parentElement.offsetWidth - 1) + 'px'; 
      element.on('blur', function(evt) { 
      console.log("blur - element"); 
      $scope.stopEdit(evt); 
      }); 
     }); 


     $scope.stopEdit = function(evt) { 
      // no need to validate a dropdown - invalid values shouldn't be 
      // available in the list 
      $scope.$emit(uiGridEditConstants.events.END_CELL_EDIT); 
     }; 

     element.on('keydown', function(evt) { 
      switch (evt.keyCode) { 
      case uiGridConstants.keymap.ESC: 
       evt.stopPropagation(); 
       $scope.$emit(uiGridEditConstants.events.CANCEL_CELL_EDIT); 
       break; 
      } 
      if (uiGridCtrl && uiGridCtrl.grid.api.cellNav) { 
      evt.uiGridTargetRenderContainerId = renderContainerCtrl.containerId; 
      if (uiGridCtrl.cellNav.handleKeyDown(evt) !== null) { 
       $scope.stopEdit(evt); 
      } 
      } else { 
      //handle enter and tab for editing not using cellNav 
      switch (evt.keyCode) { 
       case uiGridConstants.keymap.ENTER: // Enter (Leave Field) 
       case uiGridConstants.keymap.TAB: 
       evt.stopPropagation(); 
       evt.preventDefault(); 
       $scope.stopEdit(evt); 
       break; 
      } 
      } 
      return true; 
     }); 
     } 
    } 
    } 
]); 

Answer 2

Попробуйте это:

public setFocus(el: string): any { 
    var vm = this; 
    setTimeout(function() { 
     $("#" + el).focus(); 
     $("#" + el).select(); 

    }, 100); 
}