非输入字段上的角度JS和ng-keydown?

好的我正在将模板加载到ng-include中,如下所示:

 

指令:

  'use strict'; /*global $:false */ angular.module('bawdApp') .directive('about', function () { return { templateUrl: 'views/pantone-inner.html', restrict: 'AE', link: function postLink($scope, element) { function border(valueWidth){ $('.page_cont_wrap').css('border', valueWidth+'px solid #aaFFFF'); } $(element).css({'position': 'absolute'}).delay(200).animate({ 'margin-left': '-160px', 'margin-top': '-233px', 'left': '50%', 'top': '50%' }, 200); $scope.loadpantone = function loadpantone(){ border(0); $scope.template = $scope.pantonesAbout[0].url; $('.top_left_logo.white img').css('position', 'fixed'); }; } }; }); 

然后处理ng-include加载内容中的内容的指令:

  'use strict'; /*global $:false */ angular.module('bawdApp') .directive('pantoneMenu', function () { return { templateUrl: 'views/pantone_menu.html', restrict: 'AE', transclude: true, link: function($scope, $document) { var arraylength = $scope.pantonesAbout.length; function next(){ $scope.$parent.pantoneconter = $scope.$parent.pantoneconter + 1; $scope.$parent.PrevNext = 'next'; if($scope.$parent.pantoneconter >= arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else{ $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; } } function prev(){ var arraylength = $scope.pantonesAbout.length; $scope.$parent.pantoneconter --; $scope.$parent.PrevNext = 'prev'; if($scope.$parent.pantoneconter >= arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else if ($scope.$parent.pantoneconter = arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else if ($scope.$parent.pantoneconter = arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else{ $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; } }); } });*/ } }; }); 

关于控制器:

 'use strict'; angular.module('bawdApp') .controller('AboutCtrl', function ($scope) { $scope.pantonesAbout = [ {name:'Pantone intro', url:'views/pantone_about.html'}, {name:'Pantone one', url:'views/about_patone_one.html'}, {name:'Pantone two', url:'views/about_patone_two.html'}, {name:'Pantone three', url:'views/about_patone_three.html'}, {name:'Pantone four', url:'views/about_patone_four.html'}, {name:'Pantone five', url:'views/about_patone_five.html'}, ]; $scope.pantoneconter = 0; }); 

加载的内容包括:pantone_menu.html

  
prev next!

close

prev

next

我一整天都在用ng-keydown进行战斗我需要它加载到pantone_menu.html指令中并让用户能够向左或向右单击它然后工作与prev相同,然后我唯一的方式能够做到这一点是使用jquerylite像这样:

  $(document).on('keyup',function(e){ function plusone(){ $scope.$parent.pantoneconter = $scope.$parent.pantoneconter + 1; } if(e.which === 37){ $scope.$apply(function () { var arraylength = $scope.pantonesAbout.length; $scope.$parent.pantoneconter --; $scope.$parent.PrevNext = 'prev'; if($scope.$parent.pantoneconter >= arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else if ($scope.$parent.pantoneconter = arraylength){ $scope.$parent.pantoneconter = 0; $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; }else{ $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url; } }); } }); 

但是我真的希望能够通过angularJS做到这一点我尝试在我的pantone菜单中使用tabindex =“0”然后当我实际点击它所关注的元素然后我可以将它转到console.log:in pantone_menu .html:prev next!

pantone_menu指令:

  $scope.keypress = function keypress(){ console.log('keyCode'); }; 

现在这个工作,但只有当我专注(IE点击元素)我需要它一旦pantone_menu加载..如何? 这让我疯了! 注意:我正在加载angularJS-ui但是没有运气…正如问到的plnkr你可以看到如果你取消注释第79行到第112行它会工作然后它就是其中一个示波器上的错误而它似乎错了像这样做?

您是否尝试通过JS专注于元素?

在jquery中它看起来像这样,element.focus():-)