Cannot Read property 'data' of undefined (Angularjs- not able to read data from template to controller)

Question

I am newbie to angularjs. Still understanding the details and how it works. i am in a situation where i cannot find this simple solution. Hope someone could help me here.

I have created a folder structure

Select
->SelectModule.js
->SelectDirective.js
->SelectController.js
->SelectTemplate.html

Here are the contents inside each file.

SelectModule.js

angular.module('Select', []);

SelectDirective.js

'use strict';
angular.module('Select').directive('Select', Select);
function Select() {
return {
    transclude: false,
    scope: {

    },
    controller: 'SelectController',
    templateUrl: 'app/directives/Select/SelectTemplate.html'
};
};

SelectController.js

use strict'
var SelectMod = angular.module('Select', []);
SelectMod.controller('SelectController', function ($scope) {

console.log($scope.details.data);
});

SelectTemplate.html

<section ng-controller="SelectController">
<div><label>Data:</label><div><input type="number" ng-model= "details.data" ng-init="details.data=0.2"  step="0.1" /></div></div>
</section>

Now, in the template i have initialized details.data=0.2. If you see in the controller, i am trying the get this initialized data in templete and outputting it in the console by this statement

console.log($scope.details.data);

The problem is when i run the code and check the console. it gives error stating that "Cannot Read property 'data' of undefined". How do i get this value into the controller. if i get this thing, i will come to know how to get data from template and process in the controller. i am stuck here. someone please suggest or let me know where i went wrong.

charlietfl · Accepted Answer · 2015-10-26 16:50:52Z

1

The reason is the controller has to run before it can render the view, not the other way around.

So at the time you try to log the data it doesn't exist

Don't use ng-init for this purpose. The documentation for ng-init also advises not to use it this way.

Initialize variables in the controller.

answered Oct 26, 2015 at 16:50

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

Ayesha Over a year ago

@charlietfl- even if i initialize variables in controller, it provides same error. For eg. I initialized it in controller with $scope.details.data=2; and then tried to console. it didnt work.

charlietfl Over a year ago

you can't create an object that way ... $scope.details ={data:2}. If there is no object details you can't reference a property of it. Angular allows it in the view but it has to essentially do the same thing. This is standard javascript

Ayesha Over a year ago

@charlietfl- indeed, this was wat i was doing wrong. thank you for shedding some light into this.

Ayesha Over a year ago

@charlietfl- can you also let me know how to pass this data from controller back to the template now ? i mean, i want it to get initialized to the value set by me in the controller.

Collectives™ on Stack Overflow

Cannot Read property 'data' of undefined (Angularjs- not able to read data from template to controller)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related