更改页面后,Recaptcha无法获得角度响应

Question

我的角度应用程序有问题.我的网站上有一个注册页面.通常,当我直接进入注册页面时,它可以正常工作,在提交表单后发送并注册用户.当我例如加载注册页面然后转到登录页面然后再次注册时出现问题.在这种情况下,表单不会发送到服务器.
我试图找出它,甚至在点击注册链接后通过刷新页面来修复,但它没有帮助.

我稍微调试我的应用程序,发现它是重新调用导致我的问题.我使用angular-recaptcha 2.2.5版; 试图记录vcRecaptchaService.getResponse()的输出,但在控制台中没有显示.

这是一些代码,问题可能在于:

要求表格

$scope.registerRequest = (form) => {
    $scope.$broadcast('show-errors-check-validity');
    if (!form.$valid) {
        return;
    }

    $scope.isLoading = true;
    $scope.formData.reCaptcha = vcRecaptchaService.getResponse();

    apiRequest.post('user/register', $scope.formData).success((response) => {
        $scope.isLoading = false;
        $scope.registered = true;
        $scope.formData = {};
    });
};

路线:

app.config(['$routeProvider', ($routeProvider) => {
$routeProvider
        .when('/auth/login', {
            controller: 'authLogin',
            label: 'Logowanie',
            templateUrl: 'app/components/authLoginView.html',
            access: ['UNAUTH']
        })
        .when('/auth/register/', {
            controller: 'authRegister',
            label: 'Rejestracja',
            templateUrl: 'app/components/authRegisterView.html',
            access: ['UNAUTH']
        })
        .when('/auth/register/confirm', {
            controller: 'authRegister',
            label: 'Potwierdzenie rejestracji',
            templateUrl: 'app/components/authRegisterView.html',
            access: ['UNAUTH']
        })
        .when('/auth/register/resend', {
            controller: 'authRegister',
            label: 'Rejestracja',
            templateUrl: 'app/components/authRegisterView.html',
            access: ['UNAUTH']
        })
}]);

还有一些HTML:

<div ng-if="section == 'register'" class="container employer-container">
    <form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
        <h4 class="employer-h4">Rejestracja</h4>

        <p class="bg-success text-success col-xs-12" ng-show="registered">
            U?ytkownik zosta? zarejestrowany. Na podany adres e-mail wys?ali?my dalsze instrukcje.
        </p>

        <div ng-hide="registered">
            <div class="form-group" show-errors>
                <label for="email" class="col-md-3 control-label">E-mail:</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="email" placeholder="E-mail"
                           ng-model="formData.email" name="username"
                           ng-required="true">
                </div>
            </div>
            <div class="form-group" show-errors>
                <label for="password" class="col-md-3 control-label">Has?o:</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" id="password" placeholder="Has?o"
                           ng-model="formData.password" name="password" ng-minlength="5"
                           ng-required="true" equals="{{ formData.confirmPassword }}">
                </div>
            </div>
            <div class="form-group" show-errors>
                <label for="confirmPassword" class="col-md-3 control-label">Powtórz has?o:</label>
                <div class="col-md-9">
                    <input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz has?o"
                           ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5"
                           ng-required="true" equals="{{ formData.password }}">
                </div>
            </div>
            <div class="form-group" show-errors>
                <label class="col-md-3 control-label" for="userType">Rodzaj konta:</label>
                <div class="col-md-9">
                    <div class="btn-group" dropdown>
                        <button type="button" class="btn btn-default dropdown-toggle form-control"
                                id="userType" name="userType" dropdown-toggle ng-model="formData.userType"
                                ng-required="true">
                            {{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li ng-repeat="(key, userType) in userTypes">
                                <a href="" ng-click="$parent.formData.userType = key">{{ ::userType }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="form-group" show-errors>
                <div class="col-md-3"></div>
                <div class="col-md-9">
                    <input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true">
                    <label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam si? z  <a href="/#!/page/4" style="color: #3C5B9B;">Regulaminem</a></label>
                </div>
            </div>
            <div class="form-group" show-errors>
                <div class="col-md-3"></div>
                <div class="col-md-9">
                    <input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true">
                    <label class="control-label" style="text-align: left;" for="acceptTerms2">Wyra?am zgod? na przetwarzanie moich danych w celu realizacji us?ug w ramach Serwisu i akceptuj? <a href="/#!/page/5" style="color: #3C5B9B;">Polityk? Prywatno?ci.</a>.</label>
                </div>
            </div>
            <div class="form-group" show-errors>
                <div class="col-md-3"></div>
                <div class="col-md-9">
                    <input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true">
                    <label class="control-label" style="text-align: left;" for="acceptTerms3">Wyra?am zgod? na przetwarzanie moich danych w <a href="/#!/page/9" style="color: #3C5B9B;">celach marketingowych.</a></label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                    <div vc-recaptcha key="'key'"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-6 col-md-offset-3">
                    <a href="#!/auth/lostpassword">Zapomniane has?o</a> |
                    <a href="#!/auth/login">Logowanie</a>
                </div>
                <div class="col-md-3 text-right">
                    <button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
                </div>
            </div>
        </div>
    </form>
</div>

问题可以在这里看到:http://pze2.biuro.netivo.pl/

在我的路线中回答关于['UNAUTH']的一个问题.它仅允许未登录的用户进入此页面.

Answer 1

感谢 Vinny 我设法解决了这个问题。

\n\n

正如他在 reCaptcha.getResponse() 中所说，问题在于没有获得正确的小部件。

\n\n

对于那些遇到同样问题的人，我将解决方案放入我的代码中：

\n\n

要求：

\n\n

$scope.registerRequest = (form) => {\n    $scope.$broadcast(\'show-errors-check-validity\');\n    if (!form.$valid) {\n        return;\n    }\n\n    $scope.isLoading = true;\n\n    apiRequest.post(\'user/register\', $scope.formData).success((response) => {\n        $scope.isLoading = false;\n        $scope.registered = true;\n        $scope.formData = {};\n    });\n};\n

\n\n

HTML：

\n\n

<div ng-if="section == \'register\'" class="container employer-container">\n    <form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">\n        <h4 class="employer-h4">Rejestracja</h4>\n\n        <p class="bg-success text-success col-xs-12" ng-show="registered">\n            U\xc5\xbcytkownik zosta\xc5\x82 zarejestrowany. Na podany adres e-mail wys\xc5\x82ali\xc5\x9bmy dalsze instrukcje.\n        </p>\n        <div ng-hide="registered">\n            ...\n            <div class="form-group">\n                <div class="col-md-9 col-md-offset-3">\n                    <div vc-recaptcha ng-model="formData.reCaptcha" key="\'key\'"></div>\n                </div>\n            </div>\n            <div class="form-group">\n                <div class="col-md-6 col-md-offset-3">\n                    <a href="#!/auth/lostpassword">Zapomniane has\xc5\x82o</a> |\n                    <a href="#!/auth/login">Logowanie</a>\n                </div>\n                <div class="col-md-3 text-right">\n                    <button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>\n                </div>\n            </div>\n        </div>\n    </form>\n</div>\n

\n