CODEWITHSUNDEEP
javascriptangularjs
Barry
Barry

Reputation: 593

AngularJS scope property undefined

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.

Upvotes: 2

Views: 2694

Answers (3)

Bill Hannah
Bill Hannah

Reputation: 36

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.

Upvotes: 1

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

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)
})
}]);

Upvotes: 0

user3581054
user3581054

Reputation: 123

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

Upvotes: 0

Related Questions