Question

我试图制作一个非常简单的注册表单，它应该分两步完成。

我在第一步询问用户他的电子邮件
在第二步中，我向用户询问其他详细信息（步骤== 2）。

模板很简单;

<div class="input-group layout-container" ng-switch on="step">
    <!-- Login -->
    <img src="images/yeoman.png">
    <p>{{msg}}</p>
    <form name="signup">
        <input type="text" class="form-control login" placeholder="firstname" ng-model="firstname" ng-switch-when="2">
        <input type="text" class="form-control login" placeholder="lastname"ng-model="lastname" ng-switch-when="2">
        <input type="email" class="form-control login" placeholder="email" ng-model="email" ng-switch-when="1" required>
        <span class="error" ng-show="signup.input.$error.required">Cannot be blank</span>
        <span class="error" ng-show="signup.input.$error.email">Not a valid email</span>
        <input type="password" class="form-control login" placeholder="password" ng-model="pass" ng-switch-when="2"> <br/><br/>
        <div class="btn-container">
            <button class="btn btn-primary" ng-click="next()">Next</button>
        </div>
    </form>
</div>

正如您所看到的，还有一些基本的验证，我将电子邮件的值分配给我称之为电子邮件的模型。

控制器是这样的：

.controller('SignupCtrl', function ($scope) {
    $scope.msg = "First, your email";
    $scope.step = 1;
    $scope.email = ''; // this still doesn't help
    $scope.$watch('email', function (now, then, scope) {
        console.log('email change', now, then);
    });
    $scope.next = function () {
        $scope.step = Math.min($scope.step + 1, 2);
    };
})

问题在于：$ watch on＆＃39; email＆＃39;根本不会触发。这出错了哪里？

Answer 1

我同意@miqid，ng-switch隐含地创建了一个新的范围。 <input>的所有值更改实际上都发生在此隔离的子范围中。它的父母，你正在做$watch，不会收到通知。这就是你无法观察变量变化的原因。对角度用户来说，这是一个常见的陷阱。

LT; DR 只需将ng-model="foo"块中的任何ng-model="$parent.foo"更改为ng-switch。

Answer 2

这是一个有效的jsfiddle（只是你遇到问题的部分）：demo

function ctrl($scope) {
    $scope.items = ['one','two'];
    $scope.selection = 'two';
    $scope.data = {email:''};
    $scope.$watch('data.email', function (now, then, scope) {
        console.log('email change', now, then);
    });
}

请注意，如果输入为type="email"，则只有在电子邮件有效时才会触发观看。

修改：已更新，可与ng-switch配合使用。

说明：正如miqid所指出的，当您使用基元时，子范围无法访问父范围变量，但是当它们是对象时，angular会在子范围中创建一个引用。

AngularJS：带ngSwitch的ngModel，无法观看？

2 个答案: