reCaptcha数据回调只被调用一次? (AngularJS SPA)

时间:2017-07-19 16:26:07

标签: javascript angularjs recaptcha

我知道标题听起来有点多余,但让我详细说明。我正在使用AngularJS制作SPA网站,我正在尝试将reCaptcha添加到联系页面上的电子邮件表单中。现在,这有效:

*仅在直接访问联系页面时(而不是从主页导航)

*每次只有一次。提交表单后,单击后获取验证码数据回调的唯一方法是重新加载页面。

我做了很多研究,但到目前为止我还没有找到任何答案。这是html表单:

<form ng-submit="check_recaptcha($event)" action="mailer.php" method="POST" id="email-form" 
      style="text-align: left; color: black; font-family: 'Roboto Mono', sans-serif;">
        <recaptcha required class="g-recaptcha" data-sitekey=". . ."
        data-callback="recaptcha_completed" data-expired-callback="recaptcha_expired"></recaptcha>

        <button class="btn btn-primary btn-lg" type="submit" name="submit" 
        style="margin-top: 20px;">Send</button>

      </form>

这是联系页面的角度控制器:

danApp.controller('contactController', function ($scope, orderService) {
  $scope.state = 'contact';
  console.log(orderService.getMessage());

  $scope.message = orderService.getMessage();
  orderService.setMessage("");

  //this variable will tell whether or not to allow the form submission. The only
  //way to set it to true is to fill out the recaptcha
  $scope.allow_form_submission = false;

  //this variable detects a bad attempt (recaptcha not filled out). Its used to 
  //display the red text when this happens
  $scope.bad_attempt = false;

  //recaptcha callback, gets run when the recaptcha is successfully completed
  var recaptcha_completed = function () {
    console.log("recaptcha completed");
    $scope.allow_form_submission = true;
  }

  //recaptcha callback, gets run when recaptcha submission expires
  var recaptcha_expired = function () {
    console.log("recaptcha expired");
    $scope.allow_form_submission = false;
  }

  //We need to set this variable to the window so that it can be accessed by recaptcha
  //outside of angularJS
  window.recaptcha_completed = recaptcha_completed;
  window.recaptcha_expired = recaptcha_expired;

  //checks to see if the recaptcha has been filled out or not. used as the form 
  //submission callback (ng-submit)
  $scope.check_recaptcha = function (e) {
    if (!$scope.allow_form_submission) {
      //alert("Please fill in the recaptcha");
      $scope.bad_attempt = true;
      e.preventDefault();

      //this allows the form to be filled out again
      $("#email-form").unbind('click');
      return false;
    }
  }
});

这是recaptcha指令的定义:

danApp.directive('recaptcha', ['$window', '$compile', function($window, $compile) {
return {
    replace: true,
    link: function(scope, elem) {
        var key = '. . .';
        activate();
        function activate() {
            if(angular.isDefined($window.grecaptcha)) {
                $window.grecaptcha.render(elem[0], {
                    'sitekey': key
                });
            }
            else {
                console.log("didn't work. . .");
            }
        }
    }
}}]);

我知道这很多但有没有人可以找出这个问题的来源?

0 个答案:

没有答案
相关问题