Trouble initializing AngularJS Controller: Cannot set property ... of undefined

Question

I'm new to angular and working on a small project which has multiple modules loaded onto a single page as requested. Currently I'm just trying to get the application to load a parameter with the staffdetails.html module and update it with the controller. Currently it just displays

Hello

Staff Details....

So the value from the controller is not being loaded. I've tried in both angular 1.2 legacy and 1.5.9 (I think the latest stable), as I know syntax has apparently changed.

Here is the index.html page.

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" />

    <!-- SPELLS -->
    <!-- load angular and angular route via CDN -->
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-ui-router.min.js"></script>
    <script src="lib/jquery-2.1.1.min.js"></script>1


    <script>
        (function() {
            angular.module("app", ["ui.router"]);
        }());
    </script>

    <!-- Services -->
    <!--script src="app/service/informationStorage-Service.js"</script-->

    <!-- Controllers -->
    <script src="app/controller/additionalfeatures-controller.js"></script>
    <script src="app/controller/outcome-controller.js"></script>
    <script src="app/controller/staffdetails-controller.js"></script>
    <script src="app/controller/training-controller.js"></script>

    <script>
    $(document).ready (
        function () {
            var app = angular.module("app");
            console.log("Index1");
            app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) {
                //$compileProvider.debugInfoEnabled(false);
                $stateProvider.state(
                    "staffdetails", {
                        url: "/staffdetails",
                        views: {
                            "": {
                                templateUrl: "template/staffdetails.html",
                                controller: "StaffDetailCtrl"
                            }
                        }
                    }
                );
            console.log("Index2");
                $urlRouterProvider.otherwise("");
            } ]);
        } ());

    </script>
</head>
<body>
Hello
    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <div ui-view ng-cloak></div>
    </div>
</body>

staffdetails-controller.js

(function() {
"use strict";
var app = angular.module("app");

app.controller('StaffDetailCtrl', ['$scope', function($scope) {

    console.log("StaffDetailCtrl");

    function saveDetails($scope) {

        $scope.testing = ["This is Working"];
    };

    saveDetails();
}]);

});

Finally the page which is being called as a module

<div class="container">
    <p>Staff Details...</p>
    <p> {{testing}} </p>
</div>

ng-app is in the html tag, is this the wrong place? where should ng-controller be called? Sorry very new to angular :) — theHussle
– theHussle, Commented Dec 2, 2016 at 1:40
<script src="lib/jquery-2.1.1.min.js"></script>1. There is unnecessary 1 at the end. remove it. — randominstanceOfLivingThing
– randominstanceOfLivingThing, Commented Dec 2, 2016 at 1:47
Thanks for spotting that, it didn't change the issue though. — theHussle
– theHussle, Commented Dec 2, 2016 at 1:50
the code in staffdetails-controller.js is not any IIFE. You would want to execute the function by adding () at the end before );. — randominstanceOfLivingThing
– randominstanceOfLivingThing, Commented Dec 2, 2016 at 1:51

Todd Palmer · Accepted Answer · 2016-12-02 04:29:19Z

The problem is you are not passing the $scope into your saveDetails() function.

I modified your code slightly so it would work here in a snippet. But, the main change was this line:

    saveDetails($scope);

See working snippet here:

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
    <!-- SCROLLS -->
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" />

    <!-- SPELLS -->
    <!-- load angular and angular route via CDN -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>



    <!-- Controllers -->

    <script>
        angular.module("app", ["ui.router"]);
        var app = angular.module("app");

        app.controller('StaffDetailCtrl', ['$scope', function($scope) {
            console.log("StaffDetailCtrl");
            function saveDetails($scope) {
                $scope.testing = ["This is Working"];
            }

            saveDetails($scope);
        }]);

        console.log("Index1");
        app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) {
            //$compileProvider.debugInfoEnabled(false);
            $stateProvider.state(
                    "staffdetails", {
                        url: "/staffdetails",
                        views: {
                            "": {
                                template: '<div class="container">' +
                                '<p>Staff Details...</p>' +
                                '<p> {{testing}} </p>' +
                                '</div>',
                                controller: "StaffDetailCtrl"
                            }
                        }
                    }
            );
            console.log("Index2");
            $urlRouterProvider.otherwise("/staffdetails");
        } ]);

    </script>
</head>
<body>
Hello
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
    <div ui-view ng-cloak></div>
</div>
</body>

Collectives™ on Stack Overflow

Trouble initializing AngularJS Controller: Cannot set property ... of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related