CODEWITHSUNDEEP
javascripthtmlangularjs
DJ Burb
DJ Burb

Reputation: 2364

Cannot set property 'helloMessage' of undefined

I get the error following error

Cannot set property 'helloMessage' of undefined

when I run the following code:

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<head>
    <title>Hello World</title>
</head>
<body>
    <script src="js/angular.min.js"></script>
    <script src="js/helloWorld.js"></script>
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>

</body>
</html>

Javascript (helloWorld.js):

(function (angular) {

    function HelloWorldCtrl ($scope) {
        $scope.helloMessage = "Hello World";
    }

    angular.module("app", []).controller("HelloWorldCtrl", ["$scope", HelloWorldCtrl()]);

})(angular);

Any ideas? I am using angular version 1.2.28

Upvotes: 0

Views: 72

Answers (1)

PSL
PSL

Reputation: 123739

You should not invoke the controller constructor function, instead just provide the controller function reference. When you invoke it manually 1) You are invoking it right away and setting undefined (return value) as the controller, if at all invocation succeeds(It fails right there in your case). 2) There is no dependency injected due to manual invocation which otherwise will be injected by angular DI engine($injector)

Change

.controller("HelloWorldCtrl", ["$scope", HelloWorldCtrl()]);
                                                        ^___

to

.controller("HelloWorldCtrl", ["$scope", HelloWorldCtrl]);

Upvotes: 1

Related Questions