How can I broadcast and pick up a keypress event in AngularJS?

Samantha J T Star

I already have this code:

<body ng-keydown="key($event);" ng-controller="appController">

function appController($scope) {

    $scope.key = function($event){
        console.log($event.keyCode);
        if ($event.keyCode == 38)
            alert("up arrow");
        else if ($event.keyCode == 39)
            alert("right arrow");
        else if ($event.keyCode == 40)
            alert("down arrow");
        else if ($event.keyCode == 37)
            alert("left arrow");
    }
}

But I have just one controller that when it is present inside of the body will need to call a function if the arrow keys are pressed.

How can I connect they events in the body from my appController down to the lower level controller which in this case is called questionController?

Pankaj Parkar

If you are maintaining event on you main parent controller then $broadcast event to their children's inside $scope.

$scope.key = function($event) {
    $scope.$broadcast('key', $event)
}

$scope.$on = function(event, keyEvent) {
    console.log($event.keyCode);
    if (keyEvent.keyCode == 38)
        alert("up arrow");
    else if (keyEventt.keyCode == 39)
        alert("right arrow");
    else if (keyEvent.keyCode == 40)
        alert("down arrow");
    else if (keyEvent.keyCode == 37)
        alert("left arrow");
}

No need use $broadcast inside $rootScope, because all the child scope will listen the this event.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How can I broadcast and event with AngularJS?

How to use a keypress event in AngularJS?

How can I pass a keypress value to a function, through an event listener?

How can I get jquery .val() AFTER keypress event?

How can I listen for keypress event on the whole page?

How can I pick-up a payload data in a nestd payload?

How can i have pick only date from datetmepicker in angularjs?

How to use AngularJS keypress and click event combined

How to imitate keypress event for angularJS input?

How can'I test angularJs event '$on'?

How can I register only numbers in TextBox?(i dont have KeyPress event)

How can I make a textbox listening to a Keypress-Event and an InputBinding together

Using Javascript, how can I detect a keypress event but NOT when the user is typing in a form field?

How can I get the original key map of a numbered key in a keypress event with shift?

How to mock an event like 'keypress' or 'keydown' in an AngularJS unit test?

How can I write a public file for my service to pick up on Android?

How can I create new git branch based on current that will pick up all local changes with it?

How can I pick up the conversation_id of a message just sent or received?

C# How can I pick up numbers that contains x number from List?

How can I set my current location for geolocation APIs to pick up?

How can i pick out value from consecutive value of event by using siddhi

How can I make Netlify create a .env file during build? Or how can I make dotenv pick up system variables?

I can not find KeyPress event handler in c#

Where can I find documentation of the 'keypress' event in Node.js

How can I simulate a keypress in JavaScript?

How can i make a keypress action to this code?

how can i mute an iframe on keypress

How can I detect a key up / down event anywhere in an element?

How can I create a custom event for scroll up and down?