angular JS and ng-keydown on non input field?

Question

OK I'm loading a template into a ng-include like so:

    <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>

directive about:

    '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');
                };
      }
    };
  });

directive that then deals with the content in the ng-include loaded content:

    '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;
                            }
                        });
                    }
                });*/

            }
        };
  });

about controller:

'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;
});

loaded content includes: 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>

I have been fighting all day with ng-keydown I need it to load into the pantone_menu.html directive and have the user be able to click left or right and it then to work the same as prev and next the only way I've been able to do it currently is using jquerylite like so:

           $(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;
                        }
                    });
                }
            });

but I really want to be able to do it via angularJS I've tried using tabindex="0" in my pantone menu and this then works when i actually click the element it focuses and I can get it to console.log: in pantone_menu.html: prev next!

pantone_menu directive:

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

Now this works but only when i focus(I.E click on the element) I need it to work as soon as the pantone_menu loads.. how? this is driving me nuts! Note: I'm loading angularJS-ui aswell but no luck... as asked plnkr As you can see if you un-comment out line 79 to 112 it will work buut it then erros on one of the scopes and it just seems wrong to do it like this?

can you create a pluknr or fiddl for this? It's a lot of code... — michael
– michael, Commented Feb 9, 2014 at 21:26
I'll try basically all i need to do force the focus on a div element when it loads via ng-include so the user will be able to use the arrow keys to navigate the ng-include3 templates... I've been able to do this via a jquery lite hack but it just doesn't feel right... I'll try and put up a fiddle — vimes1984
– vimes1984, Commented Feb 9, 2014 at 21:36

Shabi_669 · Accepted Answer · 2014-02-09 19:21:43Z

1

Did you try focusing on the element via JS ?

In jquery it looks somthing like this, element.focus() :-)

answered Feb 9, 2014 at 19:21

Shabi_669

1904 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vimes1984 Over a year ago

yes i did and it works but it seems extremely hacky and not quite the right way to do it more like a work around...

Shabi_669 Over a year ago

It is a workaround. Keyboard events apply to the element in focus. You could add the event on a larger scope, like the entire page, and just handle it on the specific controller level.

Shabi_669 Over a year ago

Think about it this way, you could create a directive that handles keyboard events and then use it multiple times on the same page. Which one would you expect to handle the events ? Focus is how the browser knows where to apply them, but you could use bubbling to workaround it.

Collectives™ on Stack Overflow

angular JS and ng-keydown on non input field?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related