Reading undefined when trying to console.log a $scope variable
Question
So I'm trying to make my first Angular app and so far everything is working good, I'm trying to do a bit of form validation and this is what I have so far:
angularsap.js:
var app = angular.module('PugMe', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomePage',
templateUrl: '/partial/home'
})
.when('/login', {
controller: 'Login',
templateUrl: '/partial/login'
});
});
app.controller('HomePage', function($scope) {
bgColor('white');
active = 'link1';
});
app.controller('Login', function($scope) {
bgColor('#eee');
active = 'login';
console.log($scope);
});
Then my
index.html
<html ng-app="PugMe">
.. normal stuff ..
<div ng-view>
</div>
</html>
Then my
login.html
<div class="container">
<form class="form-signin" role="form" method='post' action='/login' name="loginForm" novalidate>
<h2 class="form-signin-heading">Please sign in</h2>
<p class="alert alert-danger" ng-hide="loginForm.$valid">{{loginForm.email}}</p>
<input name='email' ng-model="email", placeholder="Email" type="email" class="form-control" placeholder="Email address" required autofocus>
<input name='password' ng-model="password", type="text" class="form-control" required value="{{loginForm.email}}">
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="loginForm.$invalid">Sign in</button>
</form>
</div>
My problem is I don't seem to have any $scope control, when I do
console.log($scope) it returns an object (see picture)
But if I do console.log($scope.loginForm); it returns undefined ... Why is this I'm so confused. Look forward to replys thank you.
Edit: Ignore the random {{ }} variables they were just there for debugging.
My templates are in .ejs with a node backend, I don't know how important that is, but the files are saved as .html I added app.engine('html', require('ejs').renderFile);
Update if I console.log(this) I get an empty object I don't know what this means.
2 answers
solution1
0 2014-09-03 04:23:05
The HTML is not loaded when the controller is loading , What you can do is to add onLoad event handler for ng-view.
<div ng-view onload="onLoad()">
app.controller('Login', function($scope) {
bgColor('#eee');
active = 'login';
console.log($scope);
$scope.onLoad=function(){
console.log($scope);
}
});
Or if you do console.log($scope); in some other event like click for a button then you will have the form loaded.
solution2
0 2014-09-03 05:06:02
This is because javascript uses objects, arrays and functions by reference, while all other types are treated by value.
In this particular case, when you try to console $scope.loginForm, it has not been defined yet, and at the console you see it because what you see is the reference on the console, which updates automatically.
If you try to do console.log(JSON.stringify($scope)); you will se that loginForm is not on the log.
A hack to check if this is a sync issue would be to add this in your Login controller
$timeout(function(){
//whatever you want to do such as console.log($scope.loginForm);
}, 0);
This way AngularJS will wait until the current $digest cycle ends and start a new one right after executing the callback defined at $timeout
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.