更改焦点以输入AngularJS中的关键事件

发布时间：2020-12-17 09:17:35 所属栏目：安全来源：网络整理

导读：测试用例： http://jsbin.com/ahugeg/4/edit(稍长) 在上面的测试用例中,我有三个输入元素,由ng-repeat指令生成.我在这个测试案例中的意图是,如果在这个方向上有一个输入可用,那么在其中一个输入中击中上/下箭头可以将焦点移动到相应方向的输入. 我是AngularJ

测试用例： http://jsbin.com/ahugeg/4/edit(稍长)

在上面的测试用例中,我有三个输入元素,由ng-repeat指令生成.我在这个测试案例中的意图是,如果在这个方向上有一个输入可用,那么在其中一个输入中击中上/下箭头可以将焦点移动到相应方向的输入.

我是AngularJS的新手,所以我可能会失去一些直接的方式来做到这一点.无论如何,我定义了两个新的指令(自上而下),来处理上下文的事件,并调用$scope.focusNext和$scope.focusPrev方法,传递正确的条目移动.这是我被卡住的地方.

我知道处理控制器中的DOM元素不是有角度的方式,但是我看不出如何将焦点看作模型的属性/属性.我甚至想到有一个单独的$scope.focusedEntry,但是我应该注意该属性的更改？即使我和我检测到变化,我如何访问与我想要的重点对应的输入元素？

任何关于如何做这项工作的帮助都非常感谢.

我刚刚写了这个,并简要地测试了一下 – 它执行你想要的,而没有控制器和HTML中的所有额外的杂乱.看到它工作 here.

HTML：

<body ng-controller="Ctrl">
    <input ng-repeat="entry in entries" value="{{entry}}" key-focus />
</body>

控制器：

function Ctrl($scope) {
  $scope.entries = [ 'apple','ball','cow' ];
}

指示：

app.directive('keyFocus',function() {
  return {
    restrict: 'A',link: function(scope,elem,attrs) {
      elem.bind('keyup',function (e) {
        // up arrow
        if (e.keyCode == 38) {
          if(!scope.$first) {
            elem[0].previousElementSibling.focus();
          }
        }
        // down arrow
        else if (e.keyCode == 40) {
          if(!scope.$last) {
            elem[0].nextElementSibling.focus();
          }
        }
      });
    }
  };
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!