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> it returns an object (see picture)

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

编辑：忽略它们仅用于调试的随机{{}}变量。

我的模板位于.ejs后面有node后端，我不知道它有多重要，但文件保存为.html我添加了app.engine('html', require('ejs').renderFile); < / p>

更新如果我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不在日志上。

检查这是否是同步问题的黑客将是在您的登录控制器中添加

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

这样AngularJS将等到当前的$ digest周期结束并在执行$ timeout

定义的回调后立即开始一个新的

在尝试console.log $ scope变量时读取undefined

2 个答案: