Ponownie nie można uzyskać odpowiedzi kątowej po zmianie strony

Question

Mam problem z moją aplikacją kątową. Mam stronę rejestru w mojej witrynie. Zwykle, kiedy trafiam prosto na stronę rejestru, działa dobrze, po przesłaniu formularza zostaje wysłany i użytkownik jest zarejestrowany. Problem pojawia się, gdy na przykład ładuję stronę rejestru, a następnie przejdź do strony logowania, a następnie ponownie, aby się zarejestrować. W takim przypadku formularz nie jest wysyłany do serwera.
Próbowałem go rozwiązać, a nawet naprawić, odświeżając stronę po kliknięciu linku rejestracji, ale to nie pomogło.

I debugowania aplikacji trochę i stwierdził, że to recaptcha powodując mój problem. Używam angular-recaptcha wersji 2.2.5; Próbowałem zarejestrować wyjście vcRecaptchaService.getResponse(), ale nic nie pokazano w konsoli.

Oto niektóre kodu, gdzie problem może położyć:

wniosek formie

$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 = {}; 
    }); 
}; 

Trasy:

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'] 
     }) 
}]); 

A niektóre 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> 

problem można zobaczyć tutaj: http://pze2.biuro.netivo.pl/

Odpowiadając na jedno z pytań o [ 'UNAUTH'] w moich trasach. Ma to na celu umożliwienie użytkownikom, którzy nie są zalogowani, wejście na tę stronę.

Answer 1

Dzięki Vinny udało mi się rozwiązać problem.

Problem leży w tym, że w reCaptcha.getResponse() nie można uzyskać właściwego widgetu.

Dla tych, którzy będą mieli ten sam problem umieścić rozwiązanie w moim kodu:

Zapytanie:

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

    $scope.isLoading = true; 

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

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"> 
       <div class="col-md-9 col-md-offset-3"> 
        <div vc-recaptcha ng-model="formData.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>