Can a $rootScope variable be passed in state file - AngularJS

Question

I'm working on an Angular project and currently am working on making the entire project configurable. I have an object which contains an array of elements, each element being an object with the details of different page of the project.

Now I'm able to get the object when the project loads but I'm stuck at the navigation part. Previously, I had passed a text in ui-sref and state file and on clicking a link the page got navigated. But now the text would be configurable, i.e editable by the user. So I passed that variable (the text entered by the user) in ui-sref and in the controller file. I entered the title of all the array elements to an array defined with $rootScope by iterating in the controller and then used this array variable in the state file as $rootScope.array[0].

So, is this method correct? I'm getting the following error now on loading the project -

Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to: Error: [$injector:unpr] Unknown provider: $rootScope

Now i get that its saying $rootScope as unknown provider, but how to solve that? I've passed $rootScope as argument in all the angular files that are of concern here.

Also - can a $rootScope variable be passed in the state file?

EDIT - here's the controller and state code for some information -

Controller - C:\sandboxes\projects\Tests\demo\core\src\main\webapp\app\layouts\navigate

$scope.getData = function() {
              return $http.get('api/configurations')
                .success(function (response) {
                    $scope.JsonData = response;
                    return response;
                })
               .error(function (data, status, header, config) {
                   $scope.ResponseDetails = "Data: " + data +
                       "<br />status: " + status;
               });
        }

        $scope.getData().then(function(response){
            console.log(response);
            console.log($scope.JsonData[0].appConfigInfo);
            $scope.configObjectJson = JSON.parse($scope.JsonData[0].appConfigInfo);     // appConfigInfo contains the data of the different pages
            $scope.configObject = $scope.configObjectJson.PageConfig;
            console.log($scope.configObject);

            // below array to store the value of the title of each element of the array
            $rootScope.titleArray = [];
            for(var i=0; i < $scope.configObject.dashboards.length; i++) {
                $rootScope.titleArray[i] = $scope.configObject.dashboards[i].title;
            }
            console.log($rootScope.titleArray);
        });

State - C:\sandboxes\projects\Tests\demo\core\src\main\webapp\app\pages\loading-page

angular.module('myApp')
       .config(stateConfig);

    stateConfig.$inject = ['$stateProvider', '$rootScope'];

    function stateConfig($stateProvider, $rootScope) {

        $stateProvider
        .state($rootScope.titleArray[0], {      // $rootScope.titleArray is the variable created in the above controller
            parent: 'home',
            url: 'loadingPage',
            data: {
                authorities: ['ROLE_USER'],
                pageTitle: $rootScope.titleArray[0]
            },
            views: {
                'appContent@home': {
                    templateUrl: 'app/entities/loading-page/loadingPage.html',
                    controller: 'LoadingPageController',
                    controllerAs: 'vm'
                }
            }
        })
    }

Note - the controller and state files are at different locations under main folder.

I hope the question is clear enough. Any helpful comment is much appreciated. Thanks.

@Trivedi You can only access providers in config phase. You got that error because you're accessing `$rootScope` in your config phase. — Gangadhar Jannu, Feb 08 '17 at 07:30
@GangadharJannu then how can I pass a variable in the `state` file? — HardikT, Feb 08 '17 at 07:36
@GangadharJannu so just to make sure that I understood correctly, the state of the pages in my project would be fixed irrespective of what the title is given by the user? — HardikT, Feb 08 '17 at 07:39
No however what you are doing is not a correct way to change the title of the page based on the state — Gangadhar Jannu, Feb 08 '17 at 07:43
okay, then could you help me out here. What shall I do in my case? — HardikT, Feb 08 '17 at 07:44

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

No you can't

From Angular docs

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consists of a collection of two kinds of blocks:

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

In simple English the above docs says you can only inject providers and constants in config block, instances and constants in run block.

If you want to access $routeScope you need to move your code into run block.

So from your code if I understood correctly, you are trying to set the page title based on the state.

If you want to change the page title dynamically based on the state

Can a $rootScope variable be passed in state file - AngularJS

1 Answers1

No you can't