AngularJS 控制器 $scope 在 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

尝试绑定到对象：

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

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

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

Answer 2

只需访问 $parent 范围 $parent.username、$parent.password 就可以了，就像在 demo fiddle 中一样。

像ng-if这样的一些指令确实创建了一个子作用域，所以你需要访问父作用域。（谢谢@FrankModica）。例如。如果您使用 ng-show 或 ng-hide，则不需要访问 $parent 作用域（Demo fiddle，它使用 ng-show ).

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

AngularJS 控制器 $scope 在 ng-if 指令中不工作

AngularJS controller $scope not working inside ng-if directive

data-binding

2-way-object-databinding

angularjs

home.html

controller.js

config.js