捕鼠器键绑定更新 $scope 但未被 $watch 检测到。

Question

基本上我已经创建了一个函数来更新范围变量

// controller.js

$scope.variable = 0;
$scope.$watch('variable', function(){
  console.log("change from watch");
});

$scope.increment = function(){
  $scope.variable++;
  console.log($scope.variable)
}

当我绑定一个键到这个函数时，

Mousetrap.bind('j', $scope.increment)

浏览器中的 console.log 显示变量在按下键时递增，在本例中为 "j"，但从未调用上面的 $scope.$watch 函数并且console.log 消息 "change from watch" 未触发。

但是，当我在 html 文件上附加点击处理程序时，

// index.html
<a ng-click="increment()">{{ variable }}</a>

变量增加，console.log 显示 $scope.variable 增加，$watch 函数也被触发。

除了这个问题，{{ variable }}在我使用按键绑定时没有改变，但是当我点击它时它会改变。

我的猜测是 Mousetrap 中缺少某些导致函数触发但与 AngularJS $scope 不同步的东西？

Answer 1

请务必阅读 Databinding in AngularJS. Basically, in order for AngularJS to react to changes, something needs to trigger a $digest。内置的 ngClick 指令在后台执行此操作。

当使用非AngularJS的API时（例如Mousetrap），您需要手动将回调包装在$apply中，例如：

Mousetrap.bind('j', () => $scope.$apply($scope.increment));

捕鼠器键绑定更新 $scope 但未被 $watch 检测到。

Mousetrap key bindings updating $scope but not detected by $watch.

javascript

angularjs

angularjs-scope

mousetrap