Кендо DropDownList не выполняет нг фокус переплетены функции

Я этот выпадающий определен на шаблонеКендо DropDownList не выполняет нг фокус переплетены функции

<select id="{{vm.field.id}}" 
        kendo-drop-down-list 
        k-data-source="vm.field.options" 
        k-data-value-field="'code'" 
        k-data-text-field="'description'" 
        k-index="vm.selectedIndex" 
        k-ng-model="vm.field.value" 
        k-value-primitive="true" 
        k-options="vm.field.config" 
        ng-blur="vm.unfocusField()" 
        ng-focus="vm.focusField()" 
        k-on-change="vm.onValueChange()"> 
</select>

Как вы можете видеть, я нг фокуса набор (таргетирования к vm.focusField() функции), это событие правильно применяется, и функция срабатывает, когда я фокусирую поле, щелкая прямо на нем с помощью мыши. Но когда это поле сфокусировано с помощью tabbing (tab keyboard) из предыдущего поля в списке форм. Когда я нажимаю вкладку, поле становится «сфокусированным», так как в html добавляется класс «k-state-focus», и я могу использовать кнопки курсора вверх и вниз для изменения значения dropdownlist, НО, привязанная функция ng-focus не выполняется. В резюме это ng-focus слова фокусируются нажатием кнопки, но не выполняются фокусировки с помощью клавиатуры вкладок. Я доказал, что эта функция не вызывается в этой ситуации с помощью инструментов разработчика и точек останова по связанной функции.

источник

2017-02-20 Edward Calle

* Функция привязки ng-focus не выполняется * это 'vm.focusField()'? – Searching

Я пробовал редактировать один из скриптов telerik и ng-focus, отлично работал с табуляцией и щелчками мыши. Не могли бы вы предоставить простой фрагмент кода на скрипке или что-то еще. –

Я получил этот образец кода из команды поддержки telerik, которая помогла решить мою проблему.

<!DOCTYPE html> 
    <html> 
    <head> 
     <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular"> 
     <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
     <title></title> 
     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" /> 
     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.min.css" /> 
     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.mobile.min.css" /> 

     <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script> 
     <script src="https://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script> 
     <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
    </head> 
    <body> 
    <div id="example" ng-app="KendoDemos"> 
     <div class="demo-section k-content" ng-controller="MyCtrl"> 
     <h4>Static data</h4> 
     <select kendo-drop-down-list="mydropdown"> 
      <option>Albania</option> 
      <option>Andorra</option> 
      <option>Armenia</option> 
      <option>Austria</option> 
     </select> 
    </div> 
    </div> 
    <script> 
     var app = angular.module("KendoDemos", [ "kendo.directives" ]) 
      .controller("MyCtrl", function($scope){ 
       $scope.$on("kendoWidgetCreated", function(event, widget){ 
       if (widget === $scope.mydropdown) { 
        widget.wrapper.on("focus", $scope.onFocus); 
        widget.wrapper.on("blur", $scope.onBlur); 
       } 
       }); 

      $scope.onFocus = function(){ 
       console.log("Kendo DropDownList focused!"); 
      }; 

      $scope.onBlur = function(){ 
       console.log("Kendo DropDownList blured!"); 
      }; 
      }); 

    </script>

источник

2017-02-27 15:14:21

Кендо DropDownList не выполняет нг фокус переплетены функции

ответ

Смежные вопросы