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消息“从手表更改”不会触发。

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

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

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

除此问题外，{{ variable }}在使用键绑定时不会更改，但是在单击键时会更改。

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

Answer 1

确保您已阅读有关Databinding in AngularJS的信息。基本上，为了使AngularJS对更改做出反应，需要触发$digest。内置的ngClick指令可以在后台执行此操作。

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

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

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

1 个答案: