Javascript 非输入字段上的角度JS和ng向下键？

好的，我正在将模板加载到ng中，如下所示：

    <about  ng-click="loadpantone()"></about>
    <div class="pantone_wrapper">
        <div ng-include="template" tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)" ng-class="PrevNext"  class="pantoneani remo pantonebg blue" ></div>
    </div>

           $(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 < 0){
                            $scope.$parent.pantoneconter = arraylength -1;
                            $scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
                        }
                        else{
                            $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
                        }
                });
                }
                if(e.which === 39){
                    $scope.$apply(function () {
                        plusone();
                        $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;
                        }
                    });
                }
            });

然后处理ng中的内容的指令包括加载的内容：

    '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 < 0){
                        $scope.$parent.pantoneconter = arraylength -1;
                        $scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
                    }
                    else{
                        $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
                    }
                }
                $scope.close = function close(){
                    $scope.$parent.template = '';
                    $('.remo').addClass('pantoneani');
                    $('.top_left_logo.white  img').css('position', 'relative');
                };
                $scope.nextpro = function nextpro(){
                    next();
                };
                $scope.prevpro = function prevpro(){
                    prev();
                };

        /*      $(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 < 0){
                                $scope.$parent.pantoneconter = arraylength -1;
                                $scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
                            }
                            else{
                                $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
                            }
                    });
                    }
                    if(e.which === 39){
                        $scope.$apply(function () {
                            plusone();
                            $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;
                            }
                        });
                    }
                });*/

            }
        };
  });

加载的内容包括： pantone_menu.html

  <section>
<div  tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)"> prev next!</div>
  <header>
    <a ng-href="#" class="top_left_logo white"><img src="images/logo_white.png" alt="BAWD Logo"></a>
    <p ng-click="close()">close</p>
  </header>
  <div ng-click="prevpro()"><p>prev</p></div>
<div ng-click="nextpro()"><p>next</p></div>
</section>

现在这可以工作了，但只有当我聚焦（即单击元素）时，我需要它在pantone_菜单加载后立即工作。。 怎样？ 这简直快把我逼疯了！ 注意：我也在加载angularJS ui，但运气不好。。。 如所问

---

如您所见，如果您取消注释第79行到第112行，它将起作用，但它会在其中一个作用域上出错，这样做似乎是错误的？

您是否尝试通过JS关注元素

---

在jquery中，它看起来是这样的，element.focus（）：-）

是的，我做了，它工作了，但它看起来非常粗糙，不太正确，更像是一种变通方法……它是一种变通方法。键盘事件应用于焦点中的元素。您可以将事件添加到更大的范围（如整个页面），然后只在特定的控制器级别处理它。这样考虑，您可以创建一个处理键盘事件的指令，然后在同一页面上多次使用它。你希望哪一个来处理这些事件？重点是浏览器如何知道在何处应用它们，但您可以使用冒泡来解决它。您可以为此创建一个pluknr或fiddl吗？这是大量的代码…我将尝试基本上所有我需要做的事情，在通过ng include加载div元素时强制将焦点集中在该元素上，以便用户能够使用箭头键导航ng-include3模板。。。我已经能够通过jQueryLite黑客做到这一点，但感觉不太对劲。。。我会试着拉小提琴

  <section>
<div  tabindex="0" id="focus_force" ng-keydown="keypress($event.keyCode)"> prev next!</div>
  <header>
    <a ng-href="#" class="top_left_logo white"><img src="images/logo_white.png" alt="BAWD Logo"></a>
    <p ng-click="close()">close</p>
  </header>
  <div ng-click="prevpro()"><p>prev</p></div>
<div ng-click="nextpro()"><p>next</p></div>
</section>

           $(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 < 0){
                            $scope.$parent.pantoneconter = arraylength -1;
                            $scope.$parent.template = $scope.pantonesAbout[arraylength - 1].url;
                        }
                        else{
                            $scope.$parent.template = $scope.pantonesAbout[$scope.$parent.pantoneconter].url;
                        }
                });
                }
                if(e.which === 39){
                    $scope.$apply(function () {
                        plusone();
                        $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;
                        }
                    });
                }
            });

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