Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 4 down vote favorite

This question already has an answer here:

I am trying to implement a google recapcha, I am able to verify user is Human with the help of it,

The reCapcha code is calling Callback function named 'verifyCallback'in my code, Further I want to call an AngularJS fucntion written in my controller scope.

Here are my codes so far -

Main Html , I've included-

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Html partial -

    var onloadCallback = function() 
    {
        grecaptcha.render('loginCapcha', {
            'sitekey' : 'someKey',
            'callback' : verifyCallback,
            'theme':'dark'

        });
    };

    var verifyCallback = function(response) 
    {
        //I get a response if user is able to solve the Capcha challenge
        console.log(response);

        //I want to call the function called 'auth' written in my AngularJS controller
        var scope = angular.element(document.getElementById('#loginCapcha')).scope();
        scope.auth();
    };

    <div id="loginCapcha"></div>

AngularJS Controller -

var _myApp = angular.module('homeApp',[]);

_myApp.controller('loginController',['$scope',
 function($scope){

    $scope.auth = function()
    {
        console.log("Auth called");
    }
}]);
share|improve this question

marked as duplicate by Chris Baker javascript Apr 29 '16 at 13:57

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
    
I think a best solution is to use the recaptcha JS API directly instead of doing the generic setup here. There are a few recaptcha directives if you search around but not sure which one is most up to date and/or bug free at this point. developers.google.com/recaptcha/docs/display#js_api here's one vividcortex.github.io/angular-recaptcha – shaunhusain Apr 29 '16 at 5:01
1  
@shaun thanks for the links, I was trying to implement a basic working code, I'll Look into your given links. – Aniruddha Raje Apr 29 '16 at 6:25
up vote 3 down vote accepted 
<div ng-controller='loginController' id='yourControllerElementID'> 

</div>

For above scenario, use following code:

var scope = angular.element(document.getElementById('yourControllerElementID')).scope();
scope.auth();

So, your method will look like this:

var verifyCallback = function(response) 
    {
        //I get a response if user is able to solve the Capcha challenge
        console.log(response);

        //I want to call the function called 'auth' written in my AngularJS controller
        var scope = angular.element(document.getElementById('#yourControllerElementID')).scope();
        scope.auth();
    };
share|improve this answer
    
'yourControllerElementID' is my controller name or the function name inside my controller? – Aniruddha Raje Apr 29 '16 at 4:46
    
@AniruddhaRaje Updated answer, please check. – Khalid Hussain Apr 29 '16 at 4:47
    
I edited the code, it's giving me a - Uncaught ReferenceError: $scope is not defined – Aniruddha Raje Apr 29 '16 at 4:54
    
@AniruddhaRaje Updated my answer, I made a mistake. Just remove #. Replace document.getElementById('#loginCapcha') with document.getElementById('loginCapcha') – Khalid Hussain Apr 29 '16 at 4:58
1  
One more thing, I don't see any controller in your div. <div id="loginCapcha"></div> should be something like <div ng-controller='loginController' id="loginCapcha"></div>. – Khalid Hussain Apr 29 '16 at 5:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.