角度对象没有绑定

时间:2018-01-17 08:33:21

标签: angularjs

我有以下问题。我为2个独立的功能定义了2个控制器。 第一个控制器处理我的登录,第二个控制器处理忘记密码。

登录控制器绑定良好,但忘记密码控制器绑定但不绑定对象。

控制器

var singlePageApp = angular.module('SinglePageApp',[]);
singlePageApp.controller('LoginController', function ($scope, $location, $window) {
    $scope.isFormValid = false;
    $scope.message = null;
    $scope.login = null;

    // Login object
    $scope.Login = {
        Email: '',
        Password: '',
    };

    //check form validation
    $scope.$watch('LoginForm.$valid', function (newValue) {
        $scope.isFormValid = newValue;
    });

    $scope.submitForm = function () {
        console.log('Form is submitted with:', $scope.login);
        ...
    };

});

singlePageApp.controller('ForgotPasswordController', function ($scope, $location, $window) {
    $scope.message = null;
    $scope.password = null;

    // Password object
    $scope.Password = {
        Email: '',
    };

    $scope.$watchGroup(['password', 'Password'], function (newValues, oldValues, scope) {
        console.log(newValues);
    });

    $scope.forgotPassword = function () {

    };
});

登录HTML

<div ng-controller="LoginController">
<form class="form-signin mt10" name="LoginForm">
    <h2 class="form-signin-heading pwc">Please login</h2>
    <div class="login-wrap">
        <input ng-model="login.Email" id="tbEmail" name="Email" type="email" class="form-control" placeholder="Email" autofocus required>
        <span class="error" ng-show="LoginForm.Email.$touched && LoginForm.Email.$error.required">Email is required</span>
        <input ng-model="login.Password" id="tbPassword" name="Password" type="password" class="form-control" placeholder="Password" required>
        <span class="error" ng-show="LoginForm.Password.$touched && LoginForm.Password.$error.required">Password is required</span>
        <label class="checkbox">
            <span class="pull-right">
                @*<a href="javascript:;" onclick="showForgotPassword()"> Forgot Password?</a>*@
                <a href="javascript:;" ng-click="showModal()"> Forgot Password?</a>
            </span>
        </label>
        <div class="clearfix"></div>
        <button id="btnloginAdmin" type="button" ng-click="submitForm()" ng-disabled="LoginForm.$invalid && !!LoginForm.$error.email" class="btn btn-success btn-block">Login</button>

        <div class="text-center">
            <label style="color: red;" id="lblError" class="hasError-label clearfix">{{message}}</label>
            <div class="error error-red"></div>
        </div>
    </div>
</form>
</div>

HTML模式

<div ng-controller="ForgotPasswordController">
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modalForgotPassword" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" ng-form="fgForm">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Forgot Password ?</h4>
            </div>
            <div class="modal-body">
                <p>Enter your e-mail address below to reset your password.</p>
                <input type="email" name="Email" ng-model="password.Email"
                       placeholder="Email" autocomplete="off"
                       class="form-control placeholder-no-fix" required>
                <span class="error" ng-show="fgForm.Email.$touched && fgForm.Email.$error.required">Email is required</span>
                <div class="text-center">
                    <label style="color: red;" id="fError" class="hasError-label clearfix">{{message}}</label>
                    <div class="error error-red"></div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="javascript:;" class="btn btn-success" ng-disabled="fgForm.$invalid && !fgForm.$error.email" ng-click="forgotPassword();">
                    <i class="fa fa-check"></i>&nbsp;|&nbsp; Submit
                </a>
                <a href="javascript:;" class="btn btn-danger" data-dismiss="modal">
                    <i class="fa fa-times"></i>&nbsp;|&nbsp; Cancel
                </a>
            </div>
        </div>
    </div>
</div>

我已尝试更改绑定到单个对象'密码',但它声明未定义。然后我将其更改为“Password.Email”,但它仍然为空。

2个控制器绑定在同一页面上,因此不确定是否存在问题。

提前谢谢。

0 个答案:

没有答案