2

我在模板上定义了这个下拉列表

<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-focus（针对 vm.focusField() 函数），当我用鼠标直接单击字段时，该事件被正确应用并触发函数。但是，当此字段通过从表单列表上的前一个字段中通过 Tab 键（tab 键盘）获得焦点时。当我按下制表符时，该字段得到“聚焦”，因为在 html 中，类“k-state-focused”被添加到元素中，我可以使用向上和向下光标按钮来更改下拉列表值，但是，ng-focus 绑定函数不执行。在恢复此 ng-focus 单词时，通过单击聚焦，但不通过 tab 键盘执行聚焦。我证明在这种情况下没有使用开发人员工具和绑定函数上的断点调用此函数

4

1 回答 1

0

我从 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-27T15:14:21.360 回答