$rootScope in angular document ready

Question

I have this piece of code:

.service('webSocket', function ($rootScope, socketFactory, CONFIG, $timeout) { angular.element(document).ready(function () { $rootScope.log('Waiting for connection...',CONSOLE_INFO); });

And I am getting this error:

TypeError: $rootScope.log is not a function

This service is injected into this controller:

.controller('mainCtrl', function mainCtrl($scope, $rootScope, webSocket, myConsole ...

In which I have:

$rootScope.log = function (msg, type) { myConsole.log(msg,type); ... };

Can you tell me where is the problem? Or at least point me in the right direction? The reason I am using document ready function is because apart from logging messages to browser console (console.log) I use notifications for user (pNotify library) which needs to be called after DOM is loaded.

Create your log function in the Angular.run startup method. — Reactgular
– Reactgular, Commented Dec 18, 2014 at 13:53
Why don't you just use built-in angular's $log service or your myConsole service directly from your webSocket service? — Vadim
– Vadim, Commented Dec 18, 2014 at 13:58
I dont want to use $log because I have extended developer console, so just $log isnt enough :) — Pirozek
– Pirozek, Commented Dec 18, 2014 at 14:52

Vadim · Accepted Answer · 2014-12-18 15:00:01Z

Sharing something between services using $rootScope should be considered generally as anti-pattern. If you don't have some different implementation of console for different controllers, you can do it Angular-way and perform all configurations in config block. Subscribing to document ready event in the service is also not a good idea (I would prefer to do it in run block), since in angular service is instantiated once it is first time required by any other service or controller or whatever. In order to have configurable service that may have different console implementation I would implement it using provider as follows:

angular.module('app',[]). constant('console', console). constant('PNotify', PNotify). provider('myConsole', function() { var log = angular.noop; function MyConsoleFactory() { return { log: log, debug: log } } this.setLog = function(logImplementation) { log = logImplementation } this.$get = [MyConsoleFactory]; }). config(['myConsoleProvider', 'console', 'PNotify', function(myConsoleProvider, console, PNotify) { myConsoleProvider.setLog(function(msg) { console.log('[LOG] '+ Date.now() + ':\t' + msg); new PNotify({ title: 'Title', text: msg }); }); }]). run(['myConsole', '$document', function(myConsole, $document) { $document.ready(function () { myConsole.log('Waiting for connection...'); }); }]);

In this case you don't need any controller at all.

Plunker: http://plnkr.co/edit/aV9TIO07pnDs26xDBPtf?p=preview

Thanks! It seems that I was doing it wrong all the time. I`ll try to incorporate your suggestion into my design :)

Rasalom · Accepted Answer · 2014-12-18 13:57:34Z

That happens because service code runs before service was added to controller(where $rootScope.log method is defined). You can move $rootScope.log = function (msg, type) { myConsole.log(msg,type); ... }; into app.run(...) method and it will work.

Collectives™ on Stack Overflow

$rootScope in angular document ready

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related