0

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

// 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 消息“从 watch 更改"没有被解雇。

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

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

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

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

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

4

1 回答 1

0

确保您阅读了有关AngularJS 中的数据绑定的信息。基本上，为了让 AngularJS 对变化做出反应，需要触发一个$digest。内置ngClick指令在后台执行此操作。

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

Mousetrap.bind('j', () => $scope.$apply($scope.increment));
于 2018-07-10T10:36:37.320 回答