尝试console.log读取$ scope变量时读取未定义

Question

因此，我正在尝试制作我的第一个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);

});

那我的

index.html

<html ng-app="PugMe">
    .. normal stuff ..
    <div ng-view>
    </div>
</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>

我的问题是，当我这样做时，我似乎没有任何$scope控件

console.log($scope)它返回一个对象（参见图片） <code> console.log（$ scope）</ code>它返回一个对象（参见图片）

但是如果我做console.log($scope.loginForm); 它返回undefined ...为什么我这么困惑。 期待回复谢谢。

编辑：忽略随机的{{}}变量，它们只是在那里调试。

我的模板位于带有node后端的.ejs ，我不知道它的重要性，但是文件另存为.html我添加了app.engine('html', require('ejs').renderFile);

如果我console.log(this)更新，则得到一个空对象，我不知道这意味着什么。

Answer 1

加载控制器时未加载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);
    }

});

或者如果您执行console.log($scope); 在其他事件中，例如click按钮，则将加载form 。

Answer 2

这是因为javascript通过引用使用对象，数组和函数，而所有其他类型都按值对待。

在这种特殊情况下，当您尝试控制台$ scope.loginForm时，尚未定义它，并且在控制台上看到它是因为您看到的是控制台上的引用，该引用会自动更新。

如果您尝试执行console.log（JSON.stringify（$ scope））; 您会发现loginForm不在日志中。

要检查这是否是同步问题，可以将其添加到您的Login控制器中

$timeout(function(){
    //whatever you want to do such as console.log($scope.loginForm);
}, 0);

这样，AngularJS将等到当前的$ digest循环结束，并在执行$ timeout定义的回调后立即开始一个新的循环。

尝试console.log读取$ scope变量时读取未定义

问题描述

2 个解决方案

解决方案1
0 2014-09-03 04:23:05

解决方案2
0 2014-09-03 05:06:02

尝试console.log读取$ scope变量时读取未定义

问题描述

2 个解决方案

解决方案1 0 2014-09-03 04:23:05

解决方案2 0 2014-09-03 05:06:02

解决方案1
0 2014-09-03 04:23:05

解决方案2
0 2014-09-03 05:06:02