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

【问题标题】：$scope variable not updating in view after broadcast event from directive$scope 变量在指令广播事件后未在视图中更新
【发布时间】：2016-02-05 04:04:25
【问题描述】：

我已经阅读了类似的问题，但我无法弄清楚为什么它没有更新。我可以获取有关捕获事件的范围变量更新的日志。但它不会更新视图。所以它会填充“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'
        })

【问题讨论】：

标签： javascript angularjs ejs angular-directive

【解决方案1】：

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

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

【讨论】：

谢谢。真正让我感到困惑的是我从另一个问题中得到了指令 sn-p。它只是毁了我为什么它不能更新。为什么其他 $scope 变量会更新。就像在 ajax 调用的回调中一样，我可以更新 .then 函数上的 $scope 变量，它会更新。但在这里我必须调用 $apply?
我认为因为 $broadcast 和 $on 有可能运行多次，如果每次都运行一个摘要循环会影响性能。这是我最好的猜测。

【解决方案2】：

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

【讨论】：