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.

is the line template: {{something.someVar}} a mistype here or are you really missing the quotes? should be: template: '{{something.someVar}}'. — Claies
– Claies, Commented Nov 13, 2015 at 18:13

Claies · Accepted Answer · 2015-11-13 18:18:02Z

2

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}}'

answered Nov 13, 2015 at 18:18

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Eid · Accepted Answer · 2015-11-13 18:00:51Z

0

can you try this ? this should be working

.controller('someController',someController)
.directive('someDirective', someDirective);

someController.$inject = ['$scope','localStorageService'];

answered Nov 13, 2015 at 18:00

Ahmed Eid

1,1838 silver badges9 bronze badges

Comments

alexsanford1 · Accepted Answer · 2015-11-13 18:03:08Z

0

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);

answered Nov 13, 2015 at 18:03

alexsanford1

3,7771 gold badge21 silver badges23 bronze badges

1 Comment

trickpatty Over a year ago

^ not necessary and not the cause of the problem. also, sort of an ugly coding convention. your issue resides elsewhere.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related