javascript - $rootScope.$on 事件监听器函数不更改变量值

Question

我在 Controller 中使用 $rootScope.$on 来监听我正在使用的模块(Angular-packery)发出的事件。它正在工作，它获取事件并且我可以在“args”上执行操作。但我想做的是将 args 对象放入在监听器函数范围之外声明的对象变量中。我无法让以下代码工作:

(function() {
    'use strict';
    angular
        .module('app')
        .controller('searchSpeakersResultsCtrl', searchSpeakersResultsCtrl);

        searchSpeakersResultsCtrl.$inject = ['$rootScope', '$scope'];
        function searchSpeakersResultsCtrl($rootScope, $scope) {
            var vm = $scope;


            var pckry = {};
            var packeryEventListener = function (event, args) {
                pckry = args;
                console.log(pckry);
            }

            var unbind = $rootScope.$on('packeryInstantiated', packeryEventListener);
            console.log(pckry);
            vm.$on('$destroy', unbind);

        }
})();

监听器函数内的 console.log 给出了正确的值，函数外部的 console.log 给出了使用 var pckry = {}; 创建的空对象。

但是，正如预期的那样，直接使用 packeryEventListener 函数(不是从 $rootScope.$on 调用)确实会更新 packeryEventListener 函数外部的 pckry 值。

我可能会错过什么？似乎基本的 Javascript 变量作用域内容在与 $rootScope.$on 一起使用时不起作用。干杯，H.

Answer 1

这里的问题只是时间问题:看到空对象的 console.log 在回调填充变量之前被触发。请记住，Angular 是一个非常异步的环境:回调总是比您想象的晚发生。

将代码包装在 $timeout() 中可能就足够了，但一般来说，您希望确保使用异步的代码在异步部分完成之前无法运行。这通常意味着启动异步进程的东西应该返回一个 promise 。通过 Promise，您可以在解析 .then() 或被拒绝 .catch() 时运行某些内容，或者您​​可以以各种方式组合它们，例如 $q.all() 等待几件事完成。

请注意，$timeout 和 $http 也会返回 Promise。

此外，一旦你有了一个 promise ，即使它在几周前就解决了，你也可以随时使用 thePromise.then(function() {...}) 作为守卫，在 promise 已解决。 (请记住，即使 promise 已经解决，回调仍然会异步调用，直到您的其他代码返回为止)。