Burn_E99 Burn_E99 - 6 months ago 32
Javascript Question

angularjs $localStorage is undefined, but was defined

I am using angularjs's

$localStorage
function, but currently it does not want to be included for some reason. I know that
$localStorage
works, as I have used it in other controllers in the same webapp. I also know that this is not a spelling error, as I checked that repeatedly, and I also know that the
$localStorage
variable
curAllianceCol
is defined, as I use this exact same variable in a later controller.

Any help is appreciated, and if (for some reason that I don't know) you cannot use
$localStorage
in an angularjs directive, please tell me so that I can make a workaround.

Relevant JS:

window.fires = angular.module('FIRES', ['ngResource', 'ui.bootstrap', 'ui.router', 'ngStorage']);
//(...Non-relevant code..)
window.fires.directive('fieldDirective', ['ScoutService', '$localStorage', function(ScoutService, $interval, $localStorage) {
var $scope = this;
$scope.sServ = ScoutService;
console.log($localStorage.curAllianceCol); //This is line 177, just for reference between the error message and this file
$scope.col = $localStorage.curAllianceCol;
//(...Non-relevant code..)
}]);


Error message I recieve:


"Error: $localStorage is undefined
@http://192.168.250.111:8080/js/fires.js:177:2
invoke@http://192.168.250.111:8080/bower_components/angular/angular.js:3965:14
registerDirective/http://192.168.250.111:8080/bower_components/angular/angular.js:5716:33
forEach@http://192.168.250.111:8080/bower_components/angular/angular.js:325:9
registerDirective/<@http://192.168.250.111:8080/bower_components/angular/angular.js:5714:13
invoke@http://192.168.250.111:8080/bower_components/angular/angular.js:3965:14
createInjector/instanceCache.$injector<@http://192.168.250.111:8080/bower_components/angular/angular.js:3807:20
getService@http://192.168.250.111:8080/bower_components/angular/angular.js:3929:39
addDirective@http://192.168.250.111:8080/bower_components/angular/angular.js:6804:41
collectDirectives@http://192.168.250.111:8080/bower_components/angular/angular.js:6231:1
compileNodes@http://192.168.250.111:8080/bower_components/angular/angular.js:6080:22
compileNodes@http://192.168.250.111:8080/bower_components/angular/angular.js:6096:15
compileNodes@http://192.168.250.111:8080/bower_components/angular/angular.js:6096:15
compileNodes@http://192.168.250.111:8080/bower_components/angular/angular.js:6096:15
compile@http://192.168.250.111:8080/bower_components/angular/angular.js:6017:15
$ViewDirectiveFill/<.compile/<@http://192.168.250.111:8080/bower_components/angular-ui-router/release/angular-ui-router.js:3893:20
nodeLinkFn@http://192.168.250.111:8080/bower_components/angular/angular.js:6752:13
compositeLinkFn@http://192.168.250.111:8080/bower_components/angular/angular.js:6146:13
publicLinkFn@http://192.168.250.111:8080/bower_components/angular/angular.js:6042:30
updateView@http://192.168.250.111:8080/bower_components/angular-ui-router/release/angular-ui-router.js:3839:23
$ViewDirective/directive.compile/http://192.168.250.111:8080/bower_components/angular-ui-router/release/angular-ui-router.js:3801:11
$RootScopeProvider/this.$gethttp://192.168.250.111:8080/bower_components/angular/angular.js:13093:15
transitionTo/$state.transition<@http://192.168.250.111:8080/bower_components/angular-ui-router/release/angular-ui-router.js:3218:11
qFactory/defer/deferred.promise.then/wrappedCallback@http://192.168.250.111:8080/bower_components/angular/angular.js:11682:31
qFactory/ref/<.then/<@http://192.168.250.111:8080/bower_components/angular/angular.js:11768:26
$RootScopeProvider/this.$gethttp://192.168.250.111:8080/bower_components/angular/angular.js:12811:16
$RootScopeProvider/this.$gethttp://192.168.250.111:8080/bower_components/angular/angular.js:12623:15
$RootScopeProvider/this.$gethttp://192.168.250.111:8080/bower_components/angular/angular.js:12915:13
done@http://192.168.250.111:8080/bower_components/angular/angular.js:8450:34
completeRequest@http://192.168.250.111:8080/bower_components/angular/angular.js:8664:7
createHttpBackend/http://192.168.250.111:8080/bower_components/angular/angular.js:8603:1
"

Answer

I'm not sure if your code is correct but, have you tried removing the $interval or adding the appropriate dependency since that's the second parameter passed into your directive which would make $localStorage (your 3rd parameter) undefined.

Example without $interval

window.fires.directive('fieldDirective', ['ScoutService', '$localStorage', function(ScoutService, $localStorage) {
    var $scope = this;
    $scope.sServ = ScoutService;
    console.log($localStorage.curAllianceCol); //This is line 177, just for reference between the error message and this file
    $scope.col = $localStorage.curAllianceCol;
    //(...Non-relevant code..)
}]);