Encountered an unanticipated symbol at column 2 while using the Angular Google Recaptcha

I have integrated the Angular Google Recaptcha directive into my application from https://github.com/VividCortex/angular-recaptcha. However, upon running my application, I encountered an error stating that I am using my public key instead of my private key. I attempted to enclose the key in single quotes within double quotes, but faced the same issue.

The specific error message is: error: [$parse:syntax] Syntax Error: Token '6LflNBo000000000' is an unexpected token at column 2 of the expression [6LflNBo00000000000-0000000000000] starting at [6LflNBo00000000-0000000000000000].

Here are the relevant sections from the code:

<script src='https://www.google.com/recaptcha/api.js'></script>

Footer:

 <script  src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit"  async defer ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.0.3/angular-recaptcha.min.js"></script>

AngularJS:

angular.module('main', ['ngSanitize', 'ngRoute', 'cb.x2js', 'ui.bootstrap', 'vcRecaptcha']).....

HTML Markup: 

<div
   vc-recaptcha
   key="6LflNBo000000000-000000000000000"
   ng-model="user.captcha" // --> used for validation>
</div>
javascriptangularjsrecaptcha

Answer №1

If you're not utilizing it as a $scope variable, just include single quotes to your key.

Here's an example:

<div
  vc-recaptcha
  key="'9LopAQZ111111111-111111111111111'" //key
  ng-model="user.captcha" // --> used for validation>
</div>

Answer №2

Encountering the same issue, it appears that the code snippet in the GitHub repository may be outdated or inaccurate. My solution was to visit the demo site directly at:

The complete angularjs and recaptcha implementation can be found on that webpage, allowing you to inspect the source code of a functional live demo. This approach resolved the problem for me.

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

Turn off the touch events system for Ionic 2 on the leaflet map's draw controller

Seeking guidance on how to disable data-tap functionality in Ionic 2 within a leaflet map div. Anyone familiar with this? In Ionic-v1, the solution involved adding data-tap-disabled="true" to the map container (ion-content). I recently integrated the lea ...

angularjstypescriptionic2leafletleaflet.draw

Encountering status code 0 when handling 413 (Request Entity Too Large) error in AngularJS with Loopback API

1. Revealing Some Details In my client-side application built with AngularJS 1.3.15, I am utilizing a loopback API for handling requests. Within the application, I have set up interceptors using $httpProvider.interceptors to interpret status codes and di ...

angularjsloopbackjshttp-status-code-413

Display modal within a React list

I need to display a list of items with an edit button for each item, which should trigger a modal showing the details of that specific item. Initially, I had a single modal component in the parent element and passing the visible values to the parent state ...

javascriptreactjs

"Can you explain the concept of an undefined id in an AJAX request

Within my mongodb database, I have two Tables: GstState Store While working on my Store form, I encountered an issue where the JSON response was returning an undefined id when trying to select a state based on country via an ajax call to fetch GstStates ...

javascriptajaxmongodbxmlhttprequest

Tips for setting up a select dropdown in AngularJS using ng-options when the value is an object

How can I set the initial selection of a select field using ng-options? Consider the items we have: $scope.items = [{ id: 1, label: 'aLabel', subItem: { name: 'aSubItem' } }, { id: 2, label: 'bLabel', subItem: { ...

javascriptangularjs

What is the best way to create a new row within a Bootstrap table?

Struggling to format an array inside a table with the `.join()` method. The goal is to have each car on a separate row. Attempts using `.join("\r\n")` and `.join("<br />")` have been unsuccessful. What am I overlooking? ...

javascriptarraystwitter-bootstrapvue.js

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

My parent div has a unique feature where clicking on it reveals one of the child divs, and clicking again toggles the visibility of the child div. Inside this child div, there is a switch toggle that functions as a hidden checkbox. The issue I'm facin ...

javascripthtmljquerycss

One or multiple web browsers set in the Browserslist of the project

I have recently started working with the Ionic framework and encountered some warnings while setting up my application. Can anyone help me with a solution? [ng] When starting the Ionic application, I received the following warnings: [ng] One or more browse ...

javascriptangularionic-framework

Displaying and Concealing Divisions

My journey to showing/hiding divs began with piecing together a series of questions: $(document).ready(function(){ $('.box').hide(); $('#categories').onMouseOver(function() { $('.box').hide(); $('#div' + ...

javascriptjquery

Save the retrieved data in a variable and pass the entire JSON object as a prop to a React component

Having some trouble with my code. I need the app to fetch a JSON from an API and pass it as a prop so that each component file can use it and display the element on the screen. The issue is, I can't seem to figure out how to store the fetched informa ...

javascriptreactjsjsonfetch-api

Error in AngularJS: Loading null value for an option tag

I have successfully bound all the values to the option tags using Angular JS. However, I am facing an issue where a null value is getting appended on load. Additionally, when I set a value in my JavaScript code, it only sets the first value and does not ch ...

angularjs

My table elements are automatically being populated with <tr> elements thanks to Javascript

Upon viewing the screenshot: it is evident that each element is placed within its own tr. My preference is to have each element contained in a td and then wrap everything within a single tr. Here is the updated HTML structure: <div id='result&a ...

javascripthtml

What are some techniques for preventing Null Pointer Exception errors?

Currently, I am working on a project that involves creating a form with a dropdown field for categories. Based on the chosen category, I need to populate a second dropdown called subcaste using AJAX. To achieve this, I have implemented a method that disab ...

javascriptajaxvalidationjspservlets

Guide on sending data to MongoDB using Postman

I am currently facing an issue while trying to send data to the MongoDB database using Postman. Despite everything seeming fine, I keep encountering errors. https://i.stack.imgur.com/Gcf5Q.jpg https://i.stack.imgur.com/ntjwu.jpg https://i.stack.imgur.co ...

javascriptexpress

Performing a Protractor test on an Angular 5 application

We're in the process of transitioning our ui-library from AngularJS to Angular 5. I'm encountering challenges with the protractor tests. I need guidance on how to update the old AngularJS test to align it with Angular 5. If anyone has dealt wit ...

javascriptangularjsangularprotractormigrating

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

What is the best way to compare a string with a specific object key in order to retrieve the corresponding value?

I'm looking to achieve a relatively simple task, or at least I think so. My goal is to compare the pathname of a page with key-value pairs in an object. For example: if("pathname" === "key"){return value;} That's all there is to it. But I&apos ...

javascriptjqueryarraysobject

Utilizing array iteration to display images

I am having trouble getting the images to display on my card component. The description appears fine, but the images are not rendering properly even though I have the image data in an array. Here is the Card Component code: export const Card = (props) =&g ...

javascriptreactjsarrays

Sending a parameter to a form within Edge Animate

I'm facing an issue where I need to pass a variable to a form from Edge Animate. Here's the current instruction snippet: sym.$("form").append('<iframe width="100%" height="100%" src="login_PRA.php?v_id="vidn frameborder="0" scrolling="no ...

javascriptphphtmljquery-animateadobe-edge

Revise the calculation output when a specific input is missing

As I work on creating a basic web page for computing values based on selected options, I've encountered an issue with the calculation process. The result does not immediately appear; instead, I have to input a value like 0 and then delete it in order ...

javascriptjquerycalculation