在AngularJS中的指令上调用keyPress上的控制器作用域函数

时间:2018-10-16 06:28:51

标签: angularjs

下面是我的控制器作用域函数:

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

我有一个用于键盘事件的指令-按下按键,按下按键和按下按键。

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

                }

        });
    }
};}]);

我尝试调用函数scope.selectH(),但是它不起作用。 当e.keyCode == 13时如何调用selectH函数?还有其他更好的方法来执行键盘上和下箭头事件吗?

1 个答案:

答案 0 :(得分:1)

您只需要在指令中添加范围,例如scope: { someCtrlFn: '&callbackFn' }, 并将其添加到您使用

这样的指令的html中
<div ng-controller="MyCtrl">
<div my-directive callback-fn="ctrlFn(arg1)"></div>

整个示例为here

另一件事是,您可以直接从指令中调用服务,并通过注入服务提供者来获得响应。

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

            }

    });} };}]);