Angular ReferenceError: Controller is not defined

Question

I have a plunker here - http://plnkr.co/edit/ezKOtG9KJ6nD0068jpry?p=preview

I'm following this simple angular tutorial here - https://www.youtube.com/watch?v=aG8VD0KvUw4

When I run the code a get ReferenceError: Controller is not defined

Can anyone explain this or who to fix it.

        var app = angular.module('myApp', []);

        app.controller('ShieldCtrl', function($scope){

            $scope.sheildNames = [];

            this.addReigns = function(){

                $scope.shieldNames.push('Reigns: One');

            };

            this.addCollins = function(){

                $scope.shieldNames.push('Collins: Two');

            };

            this.addAmbrose = function(){

                $scope.shieldNames.push('Ambrose: Three');

            };

        })


        .directive('theshield', function(){

            return{
                restrict: 'E',
                scope: {},
                controller: 'ShieldCtrl',
                link: function(scope, element, attrs){

                    element.bind('mouseenter', function(){

                        console.log(scope.sheildName);

                    })
                }
            }
        })


        .directive('reigns', function(){
            return{
                require: 'theshield',
                link: function(scope, element, attrs, ShielCtrl){
                    ShieldCtrl.addReigns();
                }
            }
        })

        .directive('collins', function(){
            return{
                require: 'theshield',
                link: function(scope, element, attrs, ShielCtrl){
                    ShieldCtrl.addCollins();
                }
            }
        })

        .directive('ambrose', function(){
            return{
                require: 'theshield',
                link: function(scope, element, attrs, ShielCtrl){
                    ShieldCtrl.addAmbrose();
                }
            }
        })

your code has multiple issues causing it to not function correctly; the error you are asking about in this question is related to a simple typo: link: function(scope, element, attrs, ShielCtrl){. you are missing the d in all 3 functions. Once you fix that, though, you have some other issues to work out with your logic. — Claies
– Claies, Commented May 9, 2015 at 15:27
I think controller is fine but for directive you maybe have to add app.directive at each directive. — carton
– carton, Commented May 9, 2015 at 16:55

Tyler O · Accepted Answer · 2015-05-09 19:34:20Z

1

You have a simple spelling mistake, your directive controller dependencies are ShielCtrl and you're trying to use ShieldCtrl.

    .directive('reigns', function(){
        return{
            require: 'theshield',
            link: function(scope, element, attrs, ShielCtrl){
                ShieldCtrl.addReigns(); <-- CHECK spelling.
            }
        }
    })

Your next error is another spelling error: $scope.sheildNames = []; and you try to access the correct spelling: $scope.shieldNames.push('Reigns: One');

answered May 9, 2015 at 19:34

Tyler O

991 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Angular ReferenceError: Controller is not defined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related