javascript - Angular $scope 变量在通过 $rootScope.$on 调用后未更新

Question

我有一个全局方法来监视整个应用程序中的按键操作。当按键发生时，我会像这样广播该事件:

var keycodes = {
    'escape': 27,
}

angular.element($window).on('keydown', function(e) {
    for (var name in keycodes) {
        if (e.keyCode === keycodes[name]) {
            $rootScope.$broadcast('keydown-' + name, angular.element(e.target))
        }
    }
})

这一切都运行良好。在我的 Controller 中，我像这样监听事件:

$rootScope.$on('keydown-escape', $scope.hideOverlays)

这也可以正常工作，但是，当我尝试更新 $scope 对象上的属性时，我在 DOM 中看不到正确的行为:

 $scope.hideOverlays = function() {
        for (var i=0; i < $scope.gallery.items.length; i++) {
            $scope.gallery.items[i].overlayShown = false;
            $scope.gallery.items[i].editing = false;
        }
    }

当我从 Controller 内部调用这个方法时，一切都工作正常，所以我想知道 Angular 是否根据方法的调用方式做了不同的事情。我尝试过调用 $scope.$apply()。除了看起来这不是正确的做法之外，我还收到一个错误，所以那里没有骰子。非常感谢任何帮助!

Answer 1

有很多缺失的代码会带来一些问题，例如，您在哪里执行 keydown 事件，在我的示例中，您会看到我已将其放在 中Angular 中的 app.run:

// Note you have to inject $rootScope and $window
app.run(function ($rootScope, $window) {
    angular.element($window).on('keydown', function (e) {
        for (var name in keycodes) {
            if (e.keyCode === keycodes[name]) {
                $rootScope.$broadcast('keydown-' + name, angular.element(e.target))
            }
        }
    })
});

这允许它在加载任何 Controller 之前执行。

<小时/>

然后在你的 Controller 中，你应该执行一个“安全”的 $scope.$apply 方法来检查现有的摘要或应用阶段(如果有)，而不是运行 $scope.$apply那么我们就不应该申请，否则我们可以。

// Again make sure that you have everything you need injected properly.
// I need $rootScope injected so I can check the broadcast
app.controller('MainCtrl', ['$scope', '$rootScope', function ($scope, $rootScope) {
    $scope.hello = "Hello World";
    var count = 0;
    $scope.hideOverlays = function () {
        count++;
        $scope.safeApply(function () {
            $scope.hello = "You pressed the escape key " + count + " times.";
        });

    };

    $rootScope.$on('keydown-escape', $scope.hideOverlays);

    $scope.safeApply = function (fn) {
        var phase = this.$root.$$phase;
        // If AngularJS is currently in the digest or apply phase
        // we will just invoke the function passed in
        if (phase == '$apply' || phase == '$digest') {
            // Let's check to make sure a function was passed
            if (fn && (typeof (fn) === 'function')) {
                // Invoke the function passed in
                fn();
            }
        } else {
            // If there is no apply or digest in the phase
            // we will just call $scope.$apply
            this.$apply(fn);
        }
    };
}]);

Here is a working fiddle showing DOM updates when the escape key is pressed