CODEWITHSUNDEEP
javascriptangularjs
Martel Benjamin
Martel Benjamin

Reputation: 150

Global variable between run and controller angularjs

i have a script angularjs with this code :

var myApp = angular.module('App_example', ['duScroll'])
.run(function($rootScope, $location, $window) {

    var url = $window.location.href;
    if( url.indexOf("section1") != -1 ) {
        $rootScope.edition = "section1";
    } else {
        if(url.indexOf("section2") != -1) {
            $rootScope.edition = "section2";
        } else if(url.indexOf("section3") != -1) {
            $rootScope.edition = "section3";
        } else {
            $rootScope.edition = "section4";
        }
     }
     if(!history || !history.replaceState) {
         return;
     }
     $rootScope.$on('duScrollspy:becameActive', function($event, $element){
         //Automaticly update location
         var hash = $element.prop('hash');
         if (hash) {
             history.replaceState(null, null, hash+'_'+$rootScope.edition);
         }
     });
});

and this controller :

myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {

     var url = $window.location.href;
     if( url.indexOf("section1") == -1 ) {
        $rootScope.edition = "section1";
     } else {
        if(url.indexOf("section2") != -1) {
            $rootScope.edition = "section2";
        } else if(url.indexOf("section3") != -1) {
            $rootScope.edition = "section3";
        } else {
            $rootScope.edition = "section4";
        }
     }
});

But I have this flollowing error and I don't know why. How can I pass global variable between the run and the controller. It's for manipulate the url without reloading.

TypeError: Cannot set property 'edition' of undefined

Thanks.

Upvotes: 2

Views: 686

Answers (3)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Add all dependencies to function in correct order, because you missed some (like $state)

myApp.controller('ImageController', 
   ['$rootScope', '$scope', '$window', '$location', '$document', '$state',  
   function ($rootScope, $scope, $window, $location, $document, $state) {
      // code 
   });

Upvotes: 0

Rodrigo Brancher
Rodrigo Brancher

Reputation: 140

The string elements into the Array must match the dependencies injected (as arguments) on the function itself:

myApp.controller('ImageController', 
['$scope', '$window', '$location', '$document', '$state', '$rootScope', 
function ($scope, $window, $location, $document, $state, $rootScope) { 
    ... 
}]);

And that is because you are using “annotated dependency injection”, i.e., you are explicitly naming the dependencies with strings before injecting them into the controller. That's a best practice to avoid problems with minification, as explained here: angular docs

That said, you could also fix the issue by passing the function directly, without annotating the dependencies, like this:

myApp.controller('ImageController', 
function ($scope, $window, $location, $document, $state, $rootScope) { 
    ... 
});

Upvotes: 2

Blue
Blue

Reputation: 22911

The issue is this line. Your array mentions 5 parameters, but your function takes 6. You forgot to add $state to the array. As your code sits now, it will assign $rootScope to the $state object, and $rootScope will be undefined.

myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {

Simply add $state into the array, and your code should work as intended.

myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$state', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {

Upvotes: 0

Related Questions