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

Trap mistakes while utilizing async/await

Within my Express application, I have a register function for creating new users. This function involves creating the user in Auth0, sending an email, and responding to the client. I am looking to handle errors from Auth0 or Postmark individually and send ...

javascriptexpress

Valums file-uploader: Restricting file uploads based on user's credit score

Currently utilizing the amazing file uploader by Valums, which can be found at https://github.com/valums/file-uploader One feature I am looking to incorporate is a limit based on the user's account balance. The initial image upload is free, so users ...

phpjavascriptjqueryajax

Error encountered when processing a PUT request for a node causing a

After receiving minimal views and replies on a similar question I posted last night, I am reaching out again in hopes of resolving my issue. For the past two days, I have been struggling to fix this problem and progress with my project! If you are interes ...

javascriptnode.jsmongodbfor-loopforeach

Using AJAX to save data while dealing with duplicated forms

Project Details: In the midst of developing an asp.NET web application, I am faced with a challenge. The user interface (UI) I have created allows users to generate multiple instances of an object by inputting data into forms. Consequently, numerous ident ...

javascriptajaxasp.net-coreasp.net-web-apiasp.net-ajax

Simulating Cordova plugin functionality during unit testing

I have a code snippet that I need to test in my controller: $scope.fbLogin = function() { console.log('Start FB login'); facebookConnectPlugin.login(["public_profile", "email", "user_friends"], FacebookServices.fbLoginSuccess, FacebookServic ...

javascriptangularjscordovaunit-testingjasmine

Angular is unable to detect the dynamically loaded page when using Extjs

Within my Extjs SPA system, I have integrated Angular along with the necessary modules to be used on a page that is being referred in an external HTML panel in Extjs. While Angular is defined and functioning properly everywhere else, it seems to not work ...

javascriptangularjsextjsextjs4angularjs-scope

Nest.js: initializing properties from a superclass in a controller

I have a question about unit testing controllers in the Nest.js framework. My issue is that the property from a superclass is not initialized in the controller class when creating a test module. Here is an example of the code I am referring to: export cl ...

javascripttypescripttestingjestjsnestjs

Compilation of Angular 6 project is failing due to error TS1005: Expected ',' instead of the symbol used

I keep encountering an error message whenever I try to compile my code. ERROR in src/app/form/form.component.ts(22,39): error TS1005: ',' expected. Below is the snippet of code where the error is pointing: import { Component, OnInit } from &ap ...

javascriptangulartypescript

Manipulating datetime format within an input element of type date using Angular's ngModel

I have a date input in my form that is populated from the controller with a string value for 'dateOfDiagnosis'. The format of this string includes the time as well, like this: "2010-09-08T00:00:00" To bind this value to an input field in Angu ...

javascriptangulartypescriptdate-formatting

How can I insert my URL into the webPDFLoader feature of LangChain platform?

I need help figuring out how to load a PDF from a URL using the webPDFLoader. Can someone explain how to implement this? Any assistance would be greatly appreciated. I am working on this task in nextjs. Where should I place the pdfUrl variable within the ...

javascriptpdfnext.jslangchain

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

How can I sync changes between two variables in node.js?

Is there a method to create a shared variable in JavaScript? Here is an example of what I am attempting to achieve: var id = 5; var player = new Player(id); var array1[0] = player; var array2[0] = player; array1[0].id = 8 console.log(array1[0]); // ...

javascriptnode.jsvariables

inadequate document object module problem

Upon loading a page, I perform some JQuery actions on it. However, when trying to execute the line: var div = $("<div class='modal'>").append(r); I encountered an error mentioning a Hierarchy issue. It made me question if there is imprope ...

javascriptjqueryasp.nethtmldom

Setting a bookmark feature in HTML using localStorage: A step-by-step guide

I'm working on a simple code that captures the text content of a dynamically updated <h1> element and stores it as a "bookmark" in localStorage. I want to enable users to save or delete the bookmark by clicking a button. Below is a basic version ...

javascripthtmllocal-storage

Eliminate the option to locate columns in the column selector of the mui DataGridPro

Currently, I am creating a data table for a personal project. Utilizing the DataGridPro element from material ui has been quite satisfying, especially with the column selector feature. However, I wish to eliminate the "find column" section. Is it feasibl ...

javascriptreactjsmaterial-ui

Sort activities according to the preferences of the user

This is the concept behind my current design. Click here to view the design When making a GET request, I retrieve data from a MongoDB database and display it on the view. Now, I aim to implement a filter functionality based on user input through a form. ...

javascriptjsonnode.jsexpressejs

Executing a node module in a web browser

I'm attempting to upload and read an Excel file with the help of a node module called read-excel-file. Following the instructions for usage in the browser, I have added the following code snippet to my .js file: import readXlsxFile from 'read-ex ...

javascriptnode.jsnpmnode-moduleshttpserver

VueJS is unable to access an array

Unable to access an array in Vue.js. console.log(this.ref_number_response[0]); When I try to access the array, it shows undefined. I'm puzzled by this... data(){ return{ ref_number_response: [], } }, methods:{ che ...

javascriptvue.js

Troubleshooting a scenario where making edits to a mongoDB item does not result in any updates

I am struggling with a problem in my nodeJS application involving updating items in a mongoDB database. I have successfully implemented features to add and remove notes, but when attempting to update a note, the changes do not reflect in the database. Desp ...

javascriptnode.jsmongodbexpressmongoose

One way to dynamically hide certain fields based on the value of another field is by utilizing AngularJS, Razor, and C# in

Need assistance with AngularJS and Razor. I am a beginner in these technologies and need some help with the following code snippet: <div ng-app=""> <p>Input page number to filter: <input type="text" ng-model="pageNumber"></p> ...

javascriptc#jqueryangularjsrazor