在 onkeydown 事件中调用作用域函数答案

【问题标题】：Call scope function inside onkeydown event在 onkeydown 事件中调用作用域函数
【发布时间】：2016-09-30 17:07:06
【问题描述】：

我有以下html：

<input type="checkbox" ng-model="user.show_value" ng-blur="update_show_value()">

从数据库中获取一个值（true / false）并传递给 ng-model。根据它，复选框被选中/取消选中。 ng-blur 内部的函数触发数据库中的更新并起作用：

$scope.update_show_value() = function() {   
            if ($scope.user.show_value != undefined) {
                $scope.loading = true;
                //IF VALUE IS VALID, CALL THE UPDATEPIN FUNCTIONn
                User.updatevalue($scope.user)
                    //IF SUCCESSFUL, GET VALUE
                    .success(function(data) {
                        $scope.loading = false;
                        $scope.formData = {}; //CLEAR FORM SO THAT USER CAN ENTER NEW DATA
                        $scope.user.show_value = {type : $scope.user[0].show_value}; //PASS VALUE IN OUR SCOPE
                    });
            }
        };

问题是我必须使用其他不支持点击事件的设备上的复选框。从这些设备中，我应该使用相当于 enter （键码 13）。所以我添加了 onkeydown 事件来检测何时在复选框上按下回车键。使用 w3schools 的示例，我认为它有效（这是示例 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_keycode3）

 <input type="checkbox" ng-model="user.show_value" onkeydown="keyCode(event)" ng-blur="update_show_value()">

现在我想在 onkeydown 事件检测到代码 13 被按下时调用更新函数。像这样的：

<script>
function keyCode(event) {
    var x = event.keyCode;
    if (x == 13) {
        alert ("You pressed the Escape key!");
        update_show_value();
    }
}
</script>

但是，在 keycode 函数中调用 update_show_value 不起作用。实际上，在 keycode 函数中添加 update_show_value 会导致其他一切都不起作用（例如警报）

所以出于某种原因，我认为不能在 javascript 函数中调用作用域函数。如果是这样，是否有解决方法？

【问题讨论】：

不是问题，但可能是 next 问题：keyCode 不是可靠的跨浏览器。所以：var x = event.keyCode || event.which;
我建议有一个隐藏元素并手动触发事件。您的代码超出了 Angular 的范围，您将无法获得这些功能。替代可能会污染全局范围，但触发事件更好

标签： javascript jquery html angularjs

【解决方案1】：

您可以使用以下方法在 Angular 之外获取范围对象：

angular.element(event.target).scope(); // and then call whatever functions you want to on that scope object

您可以定义自己的指令来处理 keydown

angular.directive('myKeydown', [ function () {
    return {
        link: function(scope, elem, attrs) {
            element.bind('keydown', function() {
                scope.update_show_value();
            });
        }
    };
}]);

或者只使用ng-keydown 代替：https://docs.angularjs.org/api/ng/directive/ngKeydown：

$scope.keyCode = function($event) {
    . . . 
    $scope.update_show_value();
};

【讨论】：

【解决方案2】：

从 $scope.update_show_value 中删除 ()
试试下面的代码：

<script>
 var app=angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.update_show_value = function() {
        alert(1);
    };

  });
</script>

【讨论】：