The Verification Tool by Google is malfunctioning on the UI Bootstrap pop-up box

Below is the HTML code where the captcha element is added with comments:

<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="app.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src='https://www.google.com/recaptcha/api.js'></script>


</head>

<body ng-app="testApp">
    
    <!-- this will display -->
    <div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div>
    
    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="ModalView.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <h1> Captcha here!</h1>
                
                <!-- this will not display -->
                <div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div>
                
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </script>

        <button type="button" class="btn btn-default" ng-click="triggerModal()">Trigger Modal</button>

    </div>

</body>


</html>

Here is the AngularJS code block:

angular.module('testApp', ['ngAnimate','ui.bootstrap']);
angular.module('testApp').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
    
    
  $scope.triggerModal = function(){
      $scope.open();
  }


  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'ModalView.html',
      controller: 'ModalInstanceCtrl'
    });

    modalInstance.result.then(function (result) {
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('testApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {

  $scope.ok = function () {
    $uibModalInstance.dismiss();
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

Answer №1

Alright, here is the process I followed to incorporate Google reCAPTCHA into my modal display.

Firstly, let's take a look at my implementation in the index.html file:

<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="app.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


</head>

<body ng-app="testApp">
    
    <div ng-controller="ModalDemoCtrl">
        <script type="text/ng-template" id="ModalView.html">
            <div class="modal-header">
                <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <!-- Insert captcha here -->
                <my-template></my-template>                
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
                <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
            </div>
        </script>

        <button type="button" class="btn btn-default" ng-click="triggerModal()">Trigger Modal</button>

    </div>

</body>


</html>

Next, let's explore the AngularJS code I used:

angular.module('testApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('testApp').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {


    $scope.triggerModal = function () {
        $scope.open();
    }


    $scope.animationsEnabled = true;

    $scope.open = function (size) {

        var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled
            , templateUrl: 'ModalView.html'
            , controller: 'ModalInstanceCtrl'
        });

        modalInstance.result.then(function (result) {}, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };

    $scope.toggleAnimation = function () {
        $scope.animationsEnabled = !$scope.animationsEnabled;
    };

})

.directive('myTemplate', function () {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var s = document.createElement('script');
            s.src = 'https://www.google.com/recaptcha/api.js';
            document.body.appendChild(s);
        },
        template: '<div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div>'
    };
});

// Note that $uibModalInstance represents a modal window (instance) dependency and is distinct from the $uibModal service utilized above.

angular.module('testApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {

    $scope.ok = function () {
        $uibModalInstance.dismiss();
    };

    $scope.cancel = function () {
        $uibModalInstance.dismiss('cancel');
    };
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a class to a Vue component using the $refs property

I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components. To addre ...

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

I have designed a popup registration form using the Bootstrap modal class. To ensure form validation, I have integrated some jQuery validation engine functionality. Additionally, I customized the appearance by adding a box shadow, adjusting the background ...

Angular crashes and burns after attempting to clone from GitHub

Upon completing the cloning of an Angular Project from GitHub using git clone ---link, I encountered some errors when I ran "npm install". https://i.sstatic.net/cCGmY.png ...

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

I am seeking assistance with merging data from 3 different sensors into one object. I am using Cordova plugins to retrieve accelerometer, gyroscope, and magnetometer data. However, I am facing an issue in subscribing to all three observables simultaneously ...

The dropdown menu is dynamically populated based on the selection from another dropdown menu, with options retrieved from

Apologies if this has been addressed previously, but the existing solutions do not seem to work for me. I have 5 dropdowns: Brand, Model, Color, Engine No., and Chassis No. My query pertains to how I can link the dropdown options for Model based on the sel ...

Combining two ng-model inputs in Angular for seamless data integration

New to Angular and seeking some guidance. I currently have two input fields, one for the area code and the other for the number. // Input field for area code <input area-input type="tel" required="true" name="area" ng-model="employee.home.area">&l ...

What is the best way to retrieve my filtered array from the angularjs controller?

In the view, I have the following expression: <div ng-repeat="friend in (filtered = (friendsData | matchnames:search.pattern)) | myLimitTo : 9 : pageIndex * 9"" > I use filtered to display something like this: {{filtered.length}} It works perfect ...

Tips for adding a border to an element when hovered over

I am looking to achieve a hover effect that displays a border around an element without actually adding the border to the element itself, as shown in this image: https://i.sstatic.net/iFpCA.png The challenge I'm facing is that I want to allow users ...

Execution priority of Javascript and PHP in various browsers

I implemented a basic JavaScript function to prevent users from using special characters in the login form on my website: $("#login_button").click(function(){ formChecker(); }); function formChecker() { var checkLogin = docum ...

Retrieve a JSON object by making a request to a URL with specific parameters

Struggling with a common coder's mental block: The idea: Imagine entering a URL like www.mysite.com/getStuff?name=Jerry&occupation=Engineer&Id=12345 Rather than receiving a webpage, the goal is to get back a json object for parsing on anoth ...

What is the process for activating focus on an input element within a mat-select component?

How can I activate the cursor on the HTML input element (search field) using a keyboard inside mat-select? It functions properly when using a mouse, but in order to meet WCAG requirements, it needs to be fully functional with keyboard navigation. Click h ...

What could be causing my problem with the add function?

I'm having trouble capturing the user input from modal input boxes and adding them to my state array. I've attempted to extract the values from the inputs and push them into a clone of the state array, then update the state with the clone. Howeve ...

Make sure that the parent element is only visible once all of its child elements have

As a newcomer to the world of react, I am facing some challenges. I have created a form in react which includes a dropdown. To ensure reusability across multiple pages, I decided to turn this dropdown into a component that is responsible for fetching all n ...

Adjusting Image Width with jQuery on Hover

I am trying to create a hover effect for two images placed side by side. When the user hovers over one of the images, it should expand. HTML: <a href="#"><div id="skinny"></div></a> <a href="#"><div id="room9"></div ...

Problem with Ajax causing full-page reload

I currently have a webpage that utilizes JqueryUI-Mobile (specifically listview) in conjunction with PHP and some Ajax code. When the page loads initially, it displays a list generated from a MySQL DB. I want this list to refresh itself periodically witho ...

How come it's not possible to modify a variable's value in an AngularJS service using a controller?

I'm utilizing an AngularJS service to retrieve JSON data from a PHP page in order to display an Angular NVD3 chart. Initially, everything works correctly on the page. However, when I use HTML buttons to modify the parameter value, the data does not u ...

Missing Ajax Functionality in Laravel Application

The code snippet below was created by me... <script> $('#spielAuswahl').on('change', function(e){ console.log(e); var spielID = e.target.value; //ajax $get.('/spieler?spielID=' + sp ...

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...

After being initialized, the added Vue.js DOM elements do not function together

I updated an HTML page with ajax contents and incorporated Vue.js for front-end events. Unfortunately, the dynamically added elements are not interacting with the Vue.js instance, even when I attempted to forceUpdate them. Any suggestions on how to resol ...

the three.js code runs smoothly on JSfiddle, but it does not seem to be working properly

Check out this basic three.js code snippet for generating custom geometry http://jsfiddle.net/67Lgzjpb/. After attempting to run this code directly in my browser (not via JSFiddle), an error message pops up: TypeError: geom.computeCentroids is not a funct ...