Accessing scope variable from controller in a directive in angular.js

Question

(function () { 'use strict'; angular.module('app') .controller('someController', ['$scope','localStorageService',someController]) .directive('someDirective', someDirective) function someController($scope, localStorageService){ $scope.something = { someVar: localStorageService.get('someVar'), }; console.log("someVar: " + $scope.something.someVar);//prints correct value } function someDirective(){ return { template: {{something.someVar}} }; } })(); 

In the html, where

<div ng-controller="someController"> <div some-directive></div> </div> 

is added, I keep getting a "Argument 'someController' is not a function, got undefined" even though someController executes fine when printing to console.

Answer 1

There is an error in the declaration of the template for the directive here.

template: {{something.someVar}} is missing the quotes.

It should be: template: '{{something.someVar}}'

Answer 2

can you try this ? this should be working

.controller('someController',someController) .directive('someDirective', someDirective); someController.$inject = ['$scope','localStorageService']; 

Answer 3

Move the line that creates the controller and the directive to underneath the function declarations:

function someController($scope, localStorageService){ $scope.something = { someVar: localStorageService.get('someVar'), }; console.log("someVar: " + $scope.something.someVar);//prints correct value } function someDirective(){ return { template: {{something.someVar}} }; } angular.module('app') .controller('someController', ['$scope','localStorageService',someController]) .directive('someDirective', someDirective);