Adam Thomason Adam Thomason - 2 months ago 31
Node.js Question

AngularJS $scope variable undefined when trying to access it

I'm writing an Electron (node.js) app with an AngularJS frontend. Due to node.js running at OS level and Angular running at client level, the two speak to each other using IPC (or in this case, ipc implemented by https://github.com/develephant/electangular).

In this instance, I have a service which is used to fire an IPC message to the node app:

app.service('msgService', ['ipc', '$rootScope', '$q', function(ipc, $rootScope, $q){
this.sendMsg = function(type, value) {
var message = {
type: type,
value: value
};

ipc.send(message);
};
}]);


This service is injected into, and called upon by a controller, main Controller:

app.controller('mainController', ['$scope', '$rootScope', 'electron', 'msgService', 'hey', function($scope, $rootScope, electron, msgService, hey){

msgService.sendMsg('db_find', {});

// I can see the variable inside this console.log
console.log($rootScope);

// I get undefined here
console.log($rootScope.msg);

}]);


Once the node app has generated the request, it sends a message back via ipc which is then picked up by a piece of code in the .run section of the Angular app:

app.run(['$window', '$rootScope', function($window, $rootScope) {

$rootScope.$on('electron-msg', (event, msg) => {
$rootScope.msg = msg;
});

}]);


The above simply sets a msg property on the $rootScope variable within run, which I then expect to be able to access from inside my controller. You'll notice by the comments on the console.log lines that I can access $rootScope and the value is returned, however when I try and individually log $rootScope.msg, I get 'undefined'. This is also true for attempting to set a variable from the $rootScope.msg variable - I get undefined.

I've tried everything with this one, and I'm completely at the end of my tether!

Any help much appreciated :)

EDIT:

Below is the output of console.log($rootScope); as requested:

Scope {$id: 1, $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: null, $$nextSibling: null…}
$$ChildScope
:
ChildScope()
$$applyAsyncQueue
:
Array[0]
$$asyncQueue
:
Array[0]
$$childHead
:
Scope
$$childTail
:
Scope
$$destroyed
:
false
$$isolateBindings
:
null
$$listenerCount
:
Object
$$listeners
:
Object
$$nextSibling
:
null
$$phase
:
null
$$postDigestQueue
:
Array[0]
$$prevSibling
:
null
$$watchers
:
Array[2]
$$watchersCount
:
99
$id
:
1
$parent
:
null
$root
:
Scope
msg
:
Array[4]
notificationCount
:
0
notifications
:
Array[0]
online
:
true
__proto__
:
Object


Apologies for bad formatting! But you can see msg sitting within the $rootScope!

Answer

As discussed in the comments, @Adam Thomason was having trouble with an async function being called after he was trying a console.log. To ensure he uses the data he wants after the function was executed, the following code worked for him.

angular.element(document).ready(function () {
    console.log('Hello World');
});

Hope it helps someone else as well =)