call a controller scope function on keyPress from directive in AngularJS

Question

Below is my controller scope function :

MyApp.controller("MyController", function ($scope, MyService) {    
$scope.hposition = "";
$scope.selectedRow = 0;
$scope.pSearch = {};    

$scope.selectH = function (index, hId, myModel) {
    $scope.selectedRow = index;    
    var resultList = MyService.selectH(hId, $scope.hposition, myModel);
    resultList.then(function (response) {
        $scope.myModel= response.data;
        $("#divlookup").dialog('close');
    })
}   });

And I have a directive for keyboard events - keydown, keyup and keypress.

MyApp.directive('arrowSelector', ['$document', function ($document) {
return {
    restrict: 'A',
    link: function (scope, elem, attrs, ctrl) {
        $document.bind('keydown', function (e) {               
            //if (elemFocus) {
                if (e.keyCode == 38 || e.keyCode == 37) {
                    console.log(scope.selectedRow);
                    if (scope.selectedRow == 0) {
                        return;
                    }
                    scope.selectedRow--;
                    scope.$apply();
                    e.preventDefault();
                }
                if (e.keyCode == 40 || e.keyCode == 39) {
                    if (scope.selectedRow == scope.hlist.length - 1) {
                        return;
                    }
                    scope.selectedRow++;
                    scope.$apply();
                    e.preventDefault();
                }
                if (e.keyCode == 13) {                    

                    var resultList = scope.selectH(hId, $scope.hposition, myModel);
    resultList.then(function (response) {
        $scope.myModel= response.data;
        $("#divlookup").dialog('close');
    });
                    scope.$apply();
                    e.preventDefault();                        

                }

        });
    }
};}]);

I tried calling the function scope.selectH(), but it is not working. How can I call my selectH function when e.keyCode==13? Is there any other better way to do keyboard up and down arrow events ?

if this directive is only used only for what you want to achieve, then I think you're doing it wrong. I believe you should write this code in a service. — TheCleverIdiot
– TheCleverIdiot, Commented Oct 16, 2018 at 6:35
could you explain me in detail please. I am new to AngularJS. — JPil
– JPil, Commented Oct 16, 2018 at 8:46
Found this tutorial for you... check it out for a clear understanding. journaldev.com/6685/angularjs-services-example-tutorial — TheCleverIdiot
– TheCleverIdiot, Commented Oct 17, 2018 at 6:24

saumil_ · Accepted Answer · 2018-10-16 07:23:49Z

1

You just need to add scope in your directive like scope: { someCtrlFn: '&callbackFn' }, and add it to your html where you have used this directive like

<div ng-controller="MyCtrl">
<div my-directive callback-fn="ctrlFn(arg1)"></div>

Whole example as here

One more thing is that you can directly call your service from your directive and get response there by injecting service provider.

MyApp.directive('arrowSelector', ['$document','MyService', function ($document) { return {
restrict: 'A',
link: function (scope, elem, attrs, ctrl) { $document.bind('keydown', function (e) {               
        //if (elemFocus) {
            if (e.keyCode == 38 || e.keyCode == 37) {
                console.log(scope.selectedRow); if (scope.selectedRow == 0) {
                    return;
                }
                scope.selectedRow--;
                scope.$apply();
                e.preventDefault();
            } if (e.keyCode == 40 || e.keyCode == 39) {
                if (scope.selectedRow == scope.hlist.length - 1) {
                    return;
                }
                scope.selectedRow++;
                scope.$apply();
                e.preventDefault();
            }
            if (e.keyCode == 13) {   var resultList = MyService.selectH(hId, $scope.hposition, myModel);
resultList.then(function (response) {
    $scope.myModel= response.data;
    $("#divlookup").dialog('close'); });
                scope.$apply();
                e.preventDefault();                        

            }

    });} };}]);

edited Oct 16, 2018 at 7:23

answered Oct 16, 2018 at 6:55

saumil_

3232 silver badges11 bronze badges

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

1 Comment

JPil Over a year ago

Thank you very much. I used second method - calling service method directly from directive , and is working now.

Collectives™ on Stack Overflow

call a controller scope function on keyPress from directive in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related