劍道下拉列表NG對焦功能綁定

我已經在模板劍道下拉列表NG對焦功能綁定

<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>

定義此下拉正如你所看到的，我有NG-焦點組（靶向vm.focusField（）函數），此事件是正確的應用和功能觸發時，我通過鼠標直接點擊它關注領域。但是，當此字段通過從表單列表中的前一個字段選項卡（選項卡鍵盤）聚焦時。當我按下標籤上，該領域被「聚焦」，因爲在HTML中的類數k-狀態爲中心'加到元件，我可以使用向上和向下光標按鈕來改變下拉列表的值，但是，所述NG-焦點綁定函數沒有執行。在恢復這個聚焦焦點的單詞聚焦點，但沒有執行選項卡鍵盤焦點。我證明了使用上的綁定功能

來源

2017-02-20 Edward Calle

* ng-focus綁定函數未執行*是否是'vm.focusField（）'？ – Searching

我試過編輯telerik的小提琴和ng-focus中的一個，並且使用Tab鍵和鼠標點擊完美工作。你可以在小提琴上提供一個簡單的代碼片段嗎？ –

開發工具和斷點此功能不會被調用在這種情況下，我從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

劍道下拉列表NG對焦功能綁定

回答

相關問題