测试用例：
http://jsbin.com/ahugeg/4/edit(稍长)
在上面的测试用例中,我有三个输入元素,由ng-repeat指令生成.我在这个测试案例中的意图是,如果在这个方向上有一个输入可用,那么在其中一个输入中击中上/下箭头可以将焦点移动到相应方向的输入.
我是AngularJS的新手,所以我可能会失去一些直接的方式来做到这一点.无论如何,我定义了两个新的指令(自上而下),来处理上下文的事件,并调用$scope.focusNext和$scope.focusPrev方法,传递正确的条目移动.这是我被卡住的地方.
我知道处理控制器中的DOM元素不是有角度的方式,但是我看不出如何将焦点看作模型的属性/属性.我甚至想到有一个单独的$scope.focusedEntry,但是我应该注意该属性的更改？即使我和我检测到变化,我如何访问与我想要的重点对应的输入元素？
任何关于如何做这项工作的帮助都非常感谢.
我刚刚写了这个,并简要地测试了一下 – 它执行你想要的,而没有控制器和HTML中的所有额外的杂乱.看到它工作
here.
原文链接：https://www.f2er.com/angularjs/140723.htmlHTML：
<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();
}
}
});
}
};
});
