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

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

javascript angularjs

Javascript 尝试console.log$scope变量时读取未定义,javascript,angularjs,Javascript,Angularjs,因此，我正在尝试制作我的第一个Angular应用程序，到目前为止，一切都运行良好，我正在尝试进行一些表单验证，这就是我目前所拥有的： angularsap.js: var app = angular.module('PugMe', ['ngRoute', 'ngAnimate']); app.config(function($routeProvider) { $routeProvider .when('/', { controller: 'HomePage'

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

index.html
.. 普通的东西。。

然后我的

index.html

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


请登录
{{{loginForm.email}
登录

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

$scope

控件

console.log（$scope）

它返回一个对象（见图） log（$scope）它返回一个对象（参见图片）“>

但是如果我做了

console.log（$scope.loginForm）；

它会返回

未定义的

…为什么我这么困惑。期待回复谢谢

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

我的模板在

.ejs

中，有一个

节点

后端，我不知道这有多重要，但文件保存为

.html

我添加了

app.engine（'html'，require（'ejs'）.renderFile）；

如果我

console.log（this）

我得到一个空对象，我不知道这意味着什么。

当控制器加载时，HTML没有加载，您可以做的是为ng视图添加

onLoad

事件处理程序

<div ng-view  onload="onLoad()">


app.controller('Login', function($scope) {
    bgColor('#eee');
    active = 'login';
    console.log($scope);
    $scope.onLoad=function(){
      console.log($scope);
    }

});


应用程序控制器（'Login'，函数（$scope）{
bgColor（'eee'）；
活动='login'；
console.log（$scope）；
$scope.onLoad=function（）{
console.log（$scope）；
}
});

或者，如果您在一些其他事件中执行了

console.log（$scope）；

，如

单击按钮，则将加载表单。
这是因为javascript按引用使用对象、数组和函数，而所有其他类型都按值处理
在这种特殊情况下，当您尝试控制台$scope.loginForm时，它尚未定义，在控制台上您可以看到它，因为您看到的是控制台上的引用，它会自动更新
如果您尝试执行console.log（JSON.stringify（$scope）），您将发现日志中没有loginForm
检查这是否是一个同步问题的黑客方法是将其添加到您的登录控制器中
$timeout(function(){
    //whatever you want to do such as console.log($scope.loginForm);
}, 0);

通过这种方式，AngularJS将等待当前的$digest循环结束，并在执行$timeout定义的回调后立即启动一个新的循环。我认为它是在表单中自动声明的，您可以在图片中看到loginForm，如果我单击它，它将显示其他内容