ReCaptcha Google 数据回调 angularJs

Question

我已经在我的 angularjsApp 中实现了 google 验证码。

我有这个HTML

<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn()"></div>

在我的控制器中我有：

$scope.enableBtn = function(){
   $scope.captchaSigned = true;
};
$scope.key = "xyz";

但在我的控制台中无法正常工作 return :

ReCAPTCHA couldn't find user-provided function: enableBtn()

如何使用 Angularjs 进行数据回调？

Answer 1

在你的 html 中输入：

<div class="g-recaptcha" data-sitekey="{{key}}" data-callback="enableBtn"></div>

然后在你的控制器中，输入：

var enableBtn = function(){
   $scope.captchaSigned = true;
};
$scope.key = "xyz";
window.enableBtn = enableBtn;

这应该可以工作，因为它将绑定控制器中的函数。

Answer 2

在控制器中：

window.wrongCaptchaResponse = true;
window.recaptchaResponse = function(key) {
    window.wrongCaptchaResponse = false;
};

在HTML页中：

<button type="submit" ng-disabled="loginForm.$invalid || wrongCaptchaResponse">Login</button>

Answer 3

您可以在 angular 控制器中初始化 recaptcha。例如

在您的控制器中，如果您在页面加载时需要它，请在单击按钮或初始化或超时时添加它。 :

function showRecaptcha(){
 if(typeof grecaptcha !='undefined'){
  grecaptcha.render('register-recaptcha', {
           'sitekey' : 'your_site_key',
           'callback' : recaptchaCallback,
         });
 }
}

function recaptchaCallback(resp){
 console.log(11,resp);
}

<div  id="register-recaptcha"></div>

Answer 4

我已经解决了这个库https://github.com/VividCortex/angular-recaptcha

Answer 5

而不是 $scope.enableBtn = function(){ 将您的函数定义为 window.enableBtn = function(){

确保您使用 data-callback="enableBtn" 而不是 data-callback="enableBtn()"