我知道标题听起来有点多余,但让我详细说明。我正在使用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. . .");
}
}
}
}}]);
我知道这很多但有没有人可以找出这个问题的来源?