0

我正在尝试创建一个指令，将特定按键绑定到控制器范围内指定的函数，但所有回调函数似乎都被包含绑定的对象中的最后一个回调函数覆盖。我尝试使用 keymaster.js 和 mousetrap.js 将事件绑定到相同的结果。

JSFiddle 中的代码

Javascript代码：

angular.module('app', ['directives', 'controllers']);

angular.module('directives', [])
.directive('keypress', [function () {
    return function (scope, element, attrs) {
        // console.log(scope, element, attrs);
        var attribute = scope.$eval(attrs.keypress || '{}');
        for (var k in attribute) {
            console.log('binding ' + k + ' as ' + attribute[k]);
            Mousetrap.bind(k, function() { return attribute[k](scope, element); });
        }
    };
}]);

angular.module('controllers', [])
.controller('TodoController', function($scope) {
    $scope.shortcuts = {
        'w': function () { console.log('w'); },
        's': function () { console.log('s'); },
        'a': function () { console.log('a'); },
        'd': function () { console.log('d'); }
    };
});

HTML 文件：

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
    <script src="https://raw.github.com/ccampbell/mousetrap/master/mousetrap.min.js"></script>
    <script src="/javascript/app.js"></script>
  </head>
  <body>
    <div ng-app="app">
      <div ng-controller='TodoController' keypress='shortcuts'>Foo</div>
    </div>
  </body>
</html>

为什么无论我按“w”、“a”、“s”还是“d”，总是将“d”写入控制台？

4

1 回答 1

6

你陷入了一个常见的陷阱：JavaScript 中的变量始终是函数范围的。当你这样做时：

for (var k in attribute) {
    console.log('binding ' + k + ' as ' + attribute[k]);
    Mousetrap.bind(k, function() { return attribute[k](scope, element); });
}

这样bind()，您将创建四个关闭变量的闭包k——但它们都关闭同一个变量。每次循环运行都不会得到一个新的。console.log完美的作品，因为立即使用的价值。k闭包在实际运行之前不会进行评估k，到那时，它的值已更改为循环完成时的值。

根据您的目标受众，迄今为止解决此问题的最简单方法是let使用var. let确实阻止了作用域（它适用于您的期望），但这是一项相当新的发明，我不确定它的支持程度。

否则，要获得新范围，您需要一个新函数：

for (var k in attribute) {
    (function(k) {
        console.log('binding ' + k + ' as ' + attribute[k]);
        Mousetrap.bind(k, function() { return attribute[k](scope, element); });
    })(k);
}

这会将外部传递k给函数的内部k，每次都是不同的变量。你也可以把它拆分成一个小的工厂函数，但是对于这么小的东西，我不会打扰。

于 2013-01-15T03:14:47.347 回答