AngularJS - $rootScope variable initialization fails

Question

I'm trying to initialize a $rootScope array variable (arrayX) and use it in a $rootScope function in the same controller (controllerA).

The reason i'm using $rootScope instead of $scope for this variable and this function is that i'm planning to call them from another controller later.

The problem is that when I call the controller's $rootScope function i get a 'Uncaught TypeError: data.push is not a function etc.'

I believe that even if i declared the $rootScope arrayX = [] variable, this initialization is ignored or not recognized when I call the function. Can anyone explain me why I got this error and what i'm missing about the $rootScope concept? Thanks

THE CODE

angular.module('myApp')
  .controller('mainCtrl', function ($scope, $rootScope, $uibModal) {

//does this count as a valid variable initialization? 
$rootScope.localCart = [];

$rootScope.pushToCart = function (obj) {

    $rootScope.localCart.push(obj); //TYPEERROR
    ....

If i re-declare $rootScope.localCart in $rootScope.pushToCart function, things will be fine

    $rootScope.pushToCart = function (obj) {
        $rootScope.localCart = [];
        $rootScope.localCart.push(obj); // OK!
        ...

There's something i'm missing. Why is the outside-function initialization ignored? I thought that declare $rootScope variables in advance could be a nice idea (in order to avoid in-function declaration and confusion with other $scope variables...)

EDIT: Thanks everyone for the service suggestion. I'll try it as soon as possible (I need to sleep!) It's just that... I really wanted to understand why the $rootScope variable init. fails/is not recognized when I call the push method from the function.

$rootScope should be left alone in almost all cases. Why do you need it here? — lux, Nov 24 '15 at 22:26
You should be adding this logic into a service instead and then inject the service into other controllers where it's needed — mindparse, Nov 24 '15 at 22:27
Try using `$scope` instead of `$rootScope`, that'd be already better (and eventually create a service indeed) — floribon, Nov 24 '15 at 22:44
Thanks for the suggestions, i'll try with a service asap. I also tried with $scope before and the initialization worked fine. I just wanted to understand why the $rootScope variabile init. doesn't work. — Mirco Lcl, Nov 24 '15 at 22:46

score 1 · Answer 1 · answered Nov 24 '15 at 22:32

1

You have two different named variables, one is localCart and the other is localCartUser.

In your first snippet you declare localCart but then you try to push into an undeclared localCartUser variable.

Don't add reusable functionality on rootScope instead use a service (see my comment)

answered Nov 24 '15 at 22:32

mindparse

6,115
27
90
191

Sorry man, my fault. I tryed to summarize the code and made confusion with the variables name. Originally I had 2 arrays, but the problem remains. Please check my edited code. – Mirco Lcl Nov 24 '15 at 22:42

score 1 · Accepted Answer · answered Nov 24 '15 at 23:08

If you are going to use $rootScope I would suggest to do the definition of the array and the function declaration into the run block, and then use it in the controller. So you can be sure that when you use the function, both are declared.

But, you should be doing this in a services as many pointed out.

AngularJS - $rootScope variable initialization fails

2 Answers2