In my controller, I am utilizing $rootScope.$on to monitor an event emitted by a module called angular-packery. The event is successfully captured and I can manipulate the 'args'. However, my goal is to store the args object in a variable declared outside the listener function's scope. I have attempted the following code:
(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);
}
})();
The value of 'pckry' remains empty when logged outside the listener function, despite showing the correct value within the function.
Interestingly, if I call the packeryEventListener function directly instead of through $rootScope.$on, the value of 'pckry' is updated as expected outside the function.
It appears that there might be an issue with JavaScript variable scope when used in conjunction with $rootScope.$on. Any insights on what might be causing this behavior would be greatly appreciated. Thank you! - H.