嘗試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