AngularJS控制器$范围在ng-if指令

Question

我有一个登录表单，但由于某种原因，数据没有绑定在HTML和控制器之间。这是我的代码：

home.html的

<div ng-if="loggedIn">
    <h2>Welcome!</h2>
    <p>Some other welcome content...</p>
</div>

<form ng-if="!loggedIn">
    <input type="text" placeholder="Username" ng-model="username">
    <input type="password" placeholder="Password" ng-model="password">
    <button type="submit" data-ng-click="login()">Login</button>
</form>

注意：为了简洁而省略了标签，类和ID。

controller.js

myapp.controller('HomeController', ['$scope', '$log', function(scope, log) {
    scope.loggedIn = false;
    // ADDED CODE HERE

    scope.login = function() {
        // Dummy validation
        if(scope.username == 'admin' && scope.password == 'admin') {
            scope.loggedIn = true;
        };
        log.log('username: ' + scope.nombreUsuario);
        log.log('password: ' + scope.password);
        log.log('is logged in: ' + scope.loggedIn);
    };
}]);

config.js

myapp.config(['$locationProvider', '$routeProvider', function(locationProvider, routeProvider) {
    // Remove default '!' from URL
    locationProvider.hashPrefix('');

    routeProvider
    .when('/', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })
    // ... some other .when ...
    .otherwise({
        redirectTo: '/'
    });
}]);

执行此操作时，login功能的控制台输出为

username: undefined
password: undefined
is logged in: false

但是，如果我将以下内容添加到//ADDED CODE HERE部分

中的控制器中

scope.username = 'admin';
scope.password = 'admin';

控制台给了我以下内容：

username: admin
password: admin
is logged in: true

即。它工作正常。所以问题是：为什么我的视图（ng-model="..."）没有绑定到控制器的范围？我在这里错过了什么？

提前感谢您的回答。

Answer 1

只需访问$parent范围$parent.username，$parent.password，就可以在 demo fiddle 中使用。

某些指令（如ng-if）会创建子范围，因此您需要访问父范围。 （Thx @FrankModica）。例如。如果您使用的是ng-show或ng-hide，则无需访问使用$parent的{​​{1}}范围（ Demo fiddle ）。

ng-show

Answer 2

尝试绑定到对象：

$scope.myForm = {
    userName: '',
    password: '',
    // ...
};

<input type="text" placeholder="Username" ng-model="myForm.username">

由于原型继承，ng-model最初是从父作用域（您的控制器）读取的。但是一旦用户键入，ng-model最终写入由ng-if创建的子作用域，该子作用域继承自父作用域。如果你绑定到一个对象（不是一个原始对象），你可以确定你将从同一个地方读写。