There were instances where users filled up a time-consuming form but couldn’t submit it because of reCaptcha failure. Users ended up having to refresh and re-populate the form. That’s some harsh user experience. My team uses a forked version of angular-recaptcha. I located the controller, directive and template for the form. I attached a recursive $timeout
at the controller and the directive, but as of now, I’ve not gotten them to work. Some possible questions, which, if answered, may help:
- Are
$scope
for the controller andscope
for the directive the right ways to reference theng-model="captchaResponse"
? - Are the recursive functions placed in the appropriate spots? I first placed them at the bottom of the respective function bodies before moving them up to the top.
- Are the recursive functions themselves behaving as intended?
Here’s the code for my recursive function:
(function tick() {
console.debug($scope.captchaResponse);
// Do something when captchaResponse is a failure
$timeout(tick, 1000);
})();
Here’s the code for the HTML template:
<div
vc-recaptcha
ng-model="captchaResponse"
key="..."
ng-if="..."
size="invisible"
on-create="..."
on-success="..."
on-expire="..."
data-badge="inline"
></div>