测试用例:http://jsbin.com/ahugeg/4/edit(稍长)
在上面的测试用例中,我有三个输入元素,由ng-repeat指令生成.我在这个测试案例中的意图是,如果在该方向上有可用的输入,则在其中一个输入中按下向上/向下箭头应该将焦点移动到相应方向的输入.
我是AngularJS的新手,所以我可能会以一种直截了当的方式失踪.无论如何,我定义了两个新的指令(on-up和on-down)来处理up和down事件,并调用$scope.focusNext和$scope.focusPrev方法,传递正确的条目,相对于焦点应移动.这是我被困的地方.
我知道它不是处理控制器中DOM元素的角度方式,但我看不出焦点如何被视为模型的属性/属性.我甚至想过单独一个$scope.focusedEntry,但是我应该关注那个属性的变化吗？即使我这样做并且我检测到更改,如何访问与我想要关注的条目相对应的输入元素？
任何有关如何做到这一点的帮助非常感谢.
Jay*_*com 16
我刚刚编写了这篇文章并对其进行了简要测试 - 它可以实现您想要的,而不会在控制器和HTML中出现任何混乱.看到它在这里工作.
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();
}
}
});
}
};
});
我遇到了类似的问题并使用了这个简单的指令.如果它的属性解析为true,它就像ng-show和ng-hide一样只有焦点.
.directive('focusOn',function() {
return {
restrict : 'A',
link : function($scope,$element,$attr) {
$scope.$watch($attr.focusOn,function(focusVal) {
if(focusVal === true) {
setTimeout(function() {
$element.focus();
},50);
}
});
}
}
})