Question

根据以下控制器，我认为当<div>键盘箭头被按下时，ngShow left会出现。

$scope 执行更新（可以看作是打印到控制台），但DOM不会更改。

但是当我在input字段中输入内容时，会出现<div>。所以它就像有角度一样，不会注意我用keydown进行的更改。

控制器

.controller('TestCtrl', ['$scope', '$document', function($scope, $document) {
    var keyboardMap = { 37: 'left'};
    $document.on('keydown', function (event) {
        var key = keyboardMap[event.which];
        if (key) {
            console.log('lefty');
            $scope.left = true;
        } 
    });
}]);

查看

<div ng-app="TestApp" ng-controller="TestCtrl">
    <div ng-show="left" style="height: 100px; width: 100px; border: 1px black solid;"></div>
    <input ng-model="something"></input>
</div>

我在SO上读了一些其他类似的问题，但没有发现它们有用。我觉得这里有些东西我不明白。

有谁知道为什么不更新，以及如何更新？

Answer 1

请执行$digest()，因为AngularJS对on事件一无所知。

＆＃13;

function TestCtrl($scope, $document) {
  $document.on('keydown', function(event) {
    var keyboardMap = {
      37: 'left'
    };
    var key = keyboardMap[event.which];
    if (key) {
      $scope.left = true;
      $scope.$digest()
    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="TestCtrl">
  <div ng-show="left" style="height: 100px; width: 100px; border: 1px black solid;"></div>
  <input ng-model="something">
</div>

＆＃13;

Answer 2

将您的代码包裹在$apply块中：

if (key) {
            console.log('lefty');
            $scope.$apply(function() {
                $scope.left = true;
            });
        }

这迫使模型更新来自角度世界之外的事件。 Documentation

修改： $scope.$digest()是另一种方法。 Read here解释差异。

为什么DOM没有通过Angular中`keydown`函数内的$ scope更改来更新

2 个答案: