0

私は非常に単純なサインアップ フォームを作成しようとしていますが、これは 2 つのステップで機能するはずです。

  • 最初のステップでユーザーにメールアドレスを尋ねます
  • 2 番目のステップでは、ユーザーにその他の詳細を尋ねます (ステップ == 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);
    };
})

問題はこれです: 'email' の $watch はまったくトリガーされません。これはどこが間違っていますか？

4

2 に答える 2

2

ng-switch新しいスコープを暗黙的に作成する@miqidに同意します。のすべての値の変更は<input>、実際にはこの分離された子スコープで行われます。あなたがやっているその親には$watch通知されません。これが、変数の変化を監視できない理由です。これは、Angular ユーザーにとってよくある落とし穴です。

LT;DRng-model="foo"ブロック内の anyを単に変更ng-model="$parent.foo"しますng-switch。

于 2015-09-24T03:56:12.763 に答える
1

これは動作中のjsfiddleです（問題がある部分のみ）：デモ

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 で指摘されているように、プリミティブを使用する場合、子スコープは親スコープ変数にアクセスできませんが、角度のあるオブジェクトの場合、子スコープで参照が作成されます。

于 2014-04-08T08:27:07.487 に答える