$scope 变量在指令广播事件后未在视图中更新

Question

我读过类似的问题，但我不知道为什么不更新。我可以获得在捕获事件上更新范围变量的日志。但它没有更新视图。因此它填充 "test"，但不会在更新 $scope.keyPressed 时更新。

指令

app.directive('keypressEvents', [
  '$document',
  '$rootScope',
  function($document, $rootScope) {
    return {
      restrict: 'A',
      link: function() {
        $document.bind('keypress', function(e) {
          console.log('Got keypress:', e.which);
          // console.log('document', $document)
          $rootScope.$broadcast('keypress', e);
          $rootScope.$broadcast('keypress:' + e.which, e);
        });
      }
    };
  }
]);

控制器

$scope.keyPressed = 'test';
$scope.$on('keypress:13', function(onEvent, keypressEvent) {
          $scope.keyPressed = 'Enter';
          console.log($scope.keyPressed);
        });
        // For listening to all keypress events
        $scope.$on('keypress', function(onEvent, keypressEvent) {
          if (keypressEvent.which === 120) {
            $scope.keyPressed = 'x';
          }
          else {
            console.log('else' ,keypressEvent);
            $scope.keyPressed = 'Keycode: ' + keypressEvent.which;
          }
        });

风景

<div data-keypress-events>
    {{keyPressed}}
</div>

视图的控制器由路由提供者在加载部分时决定。

.when('/feed/:url', {
            templateUrl: '/templates/eventWall-feed',
            controller: 'eventWallFeedController'
        })

Answer 1

$on 和 $broadcast 不调用 $apply 因此您需要将 $scope.keypPressed 包装在 $apply 中，例如

$scope.$apply(function() {
  $scope.keyPressed = 'x';
});

Answer 2

您可以尝试将 $scope.$apply() 添加到按键函数的末尾。

$scope 变量在指令广播事件后未在视图中更新

$scope variable not updating in view after broadcast event from directive

javascript

ejs

angularjs

angular-directive