尝试console.log读取$ scope变量时读取未定义
[英]Reading undefined when trying to console.log a $scope variable
问题描述
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: 
因此，我正在尝试制作我的第一个Angular应用程序，到目前为止一切工作都很好，我正在尝试进行一些表单验证，这就是我到目前为止所拥有的：
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 的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 我的问题是，当我这样做时，我似乎没有任何$scope控件
console.log($scope) it returns an object (see picture) console.log($scope)它返回一个对象（参见图片）
But if I do console.log($scope.loginForm); 但是如果我做console.log($scope.loginForm); it returns undefined ... Why is this I'm so confused. 它返回undefined ...为什么我这么困惑。 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); 我的模板位于带有node后端的.ejs ，我不知道它的重要性，但是文件另存为.html我添加了app.engine('html', require('ejs').renderFile);
Update if I console.log(this) I get an empty object I don't know what this means. 如果我console.log(this)更新，则得到一个空对象，我不知道这意味着什么。
2 个解决方案
解决方案1
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. 加载控制器时未加载HTML，您可以为ng-view添加onLoad事件处理程序。
<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); 或者如果您执行console.log($scope); in some other event like click for a button then you will have the form loaded. 在其他事件中，例如click按钮，则将加载form 。
解决方案2
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. 这是因为javascript通过引用使用对象，数组和函数，而所有其他类型都按值对待。
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. 在这种特殊情况下，当您尝试控制台$ scope.loginForm时，尚未定义它，并且在控制台上看到它是因为您看到的是控制台上的引用，该引用会自动更新。
If you try to do console.log(JSON.stringify($scope)); 如果您尝试执行console.log（JSON.stringify（$ scope））; you will se that loginForm is not on the log. 您会发现loginForm不在日志中。
A hack to check if this is a sync issue would be to add this in your Login controller 要检查这是否是同步问题，可以将其添加到您的Login控制器中
$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 这样，AngularJS将等到当前的$ digest循环结束，并在执行$ timeout定义的回调后立即开始一个新的循环。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.