AngularJS scope property undefined

Question

I am new to AngularJS and I'm trying to understand how it manages the scope. I may be describing some of the concepts inappropriately below but, according to the documentation, $scope is an object that refers to the application model. If I create a simple HTML element such as

<div data-ng-controller="MyController">       
 <input type="text" data-ng-model="username">     
</div>

Which specifies the data-ng-model directive and populates the "application model" (scope) with a property "username" which (I believe) is a reference to the HTML element input. When I try to log the value of username in my controller code I get undefined. Why is it undefined? Does AngularJS not create the variable "username" and add it to the scope object

My controller code is like this:

angular.module('scopeExample', [])
.controller('MyController', ['$scope', $log, function($scope, $log) {
 $log.log($scope.username) // produces undefined     
}]);

When I add the username property to the scope in the controller, the property gets defined and there are no issues i.e.

angular.module('scopeExample', [])
.controller('MyController', ['$scope', $log, function($scope, $log) {
$scope.username = ''; // no problem 
$log.log($scope.username) // produces undefined     
}]);

Can someone explain this to me, I've been searching for a while and I'm getting confused by it all. Also if I've mislabeled some of the concepts in my description I would be grateful if you also correct me.

Bill Hannah · Accepted Answer · 2015-12-13 22:36:24Z

1

The ng-model directive is used to declare the a Javascript object that will contain your scope data. In this case, you're setting it to an object called username. This is the object that the $scope variable will be bound to. This is why $scope.username is undefined. Think of $scope as an alias to username. This is also why if you add a property to username you can access it from $scope.

Since scopes are central to Angular, you should have a look at https://docs.angularjs.org/guide/scope as an introduction to how scopes are used and how inheritance affects them when using directives.

answered Dec 13, 2015 at 22:36

Bill Hannah

363 bronze badges

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

Comments

user3581054 · Accepted Answer · 2015-12-13 20:50:37Z

0

This is because you are trying to attach the dom element to a non instantiated object, look at ng-bind instead.

edited Dec 13, 2015 at 20:50

answered Dec 13, 2015 at 20:41

user3581054

12312 bronze badges

Comments

Pratik Bhattacharya · Accepted Answer · 2015-12-13 20:51:24Z

0

This is happening because the value of username in scope has not been defined when the controller is initialized, and your are printing only the initial value. That is why you are getting the correct value in the 2nd example. Take a look at this: http://jsfiddle.net/pratikfiddlejs/HB7LU/21096/

I have attached a watch on the username, so that whenever it changes the changed value will be logged in the console

myApp.controller('MyController', ['$scope', '$log', function($scope, $log) {
$scope.$watch('username', function(newValue) {
if (newValue !== undefined)
  $log.log($scope.username)
})
}]);

answered Dec 13, 2015 at 20:51

Pratik Bhattacharya

3,7562 gold badges37 silver badges66 bronze badges

Collectives™ on Stack Overflow

AngularJS scope property undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related