Error encountered in Angular JS: $parse:syntax Syntax Error detected

var app=angular.module('myapp',[])
app.controller('myctrl',Myfunction);

function Myfunction($scope,$compile){
  var self=this;
  
  $scope.text=s4();
  $scope.adding=function(){
       var divElement = angular.element($("#exampleId"));
var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
divElement.append(appendHtml);


var writeelem = angular.element($("#output_from_textarea"));
var appendelem = $compile('<example-listen></example-listen>')($scope);
writeelem.append(appendelem);
  };
  
      function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
       .toString(16).substring(1);
                    }
  
}


app.directive('textareaDir',Mydire);

function Mydire($rootScope){
   return{
     scope:{
       direid:"=idDire"
     },
     template:'<textarea class="form-control {{direid}}txt"></textarea>',
     link:function(scope,elem,attrs){
       elem.bind('keypress',function(){
         console.log('pressed');
         $rootScope.$broadcast("valuetextbox","valuehere");
       });
     }
   }
}

app.directive('exampleListen',listenme);
function listenme($rootScope){
   return{
     scope:{
     },
     template:'<p>text</p>',
     link:function(scope,elem,attrs){
        $rootScope.$on("valuetextbox", function(message){
            console.log(message);
        });
        
     }
   }
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="script.js"></script>
    <script src="textbox_directive.js"></script>
  </head>
  <body ng-app="myapp">
    <div  ng-controller="myctrl">
      
      <button ng-click="adding()">Addtextarea</button>
      

      <div id="exampleId">
        
      </div>
      
      <div id="output_from_textarea">
      </div>
      
    </div>
  </body>

</html>

I am attempting to incorporate a directive with the class '2b90txt' and retrieve the value from the textbox

My intention is to introduce the directive and display the output as a value

Here is the code snippet

    app.directive('textareaDir',Mydire);

    function Mydire(){
       return{
         scope:{
           direid:"=idDire"
         },
         template:'<textarea class="form-control {{direid}}txt"></textarea>',
         link:function(scope,elem,attrs){
           elem.bind('keypress',function(){
             console.log('pressed');
           });
         }
       }
    }'

Syntax Error: Token 'b90' is an unexpected token at column 2 of the expression [2b90] starting at [b90"].

I am using the following code to append the directive

    var divElement = angular.element($("#exampleId"));
    var appendHtml = $compile('<textarea-dir id-dire="'+s4()+'"></textarea-dir>')($scope);
    divElement.append(appendHtml);

Answer №1

The issue lies in attempting to convert the result of s4 to a number using +s4(), which can sometimes return NaN, which is not acceptable for Angular.

function s4() {
  const randomNum = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return randomNum;
}

console.log(s4());

for (var i = 0; i < 10; i++) {
 const randomNum = s4();
 console.log(`result: ${randomNum}, converted to: ${+randomNum}`);

}

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

A comprehensive guide on using ajax to reproduce a Postman POST API request

Currently, I am able to retrieve an "access_token" using Postman; however, I am attempting to recreate this process in ajax for experimentation purposes on jsfiddle. In Postman, the following setup is used: A POST request URL: No active headers Body in ...

Retrieve the output of a function once the function has completed

I'm facing an issue where I need to wait for a function to return a value from my MySQL table before using it as a return for my const ProjektNameIntentHandler. Here is the relevant code snippet: const ProjektNameIntentHandler = { canHandle(handlerIn ...

Having trouble with installing "npm install semantic-ui-react semantic-ui-css"? Any ideas on how to fix it?

Encountered an error while trying to install Semantic UI React and Semantic UI CSS: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [ema ...

JavaScript issues in FireFox and Internet Explorer when using JQuery

I have developed a PHP GD image for generating captcha images, saved as image.php. Each time it creates a unique captcha image. Inside the signup.php file: <img alt="" src="image.php"> <input type="button" id="btn" value="cannot read captcha"&g ...

A step-by-step guide on creating a unique ticket number sequence in PHP

Looking to create a unique ticket number sequence using PHP? Here's the given sequence: 1-W1 (mandatory). 2-Date (yy-dd-mm) format. 3-001-999 (resets daily from 001). Check out this example: e.g. - W120200101001 I've started the code below, b ...

Trouble arises when attempting to create a two-column layout using Material UI's <Grid> component

My goal is to create a two-column layout where each column takes up half of the screen and has equal height. To better illustrate, take a look at this image. The code I've tried so far is not working as expected: import React from "react"; import { ...

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...

Utilizing Ajax for submitting data in a Spring application

I'm attempting to send a PUT request to the controller using AJAX. Here is my code: $().ready(function(){ $('#submit').click(function(){ var toUrl = '/users/' + $('#id').val() + '/profile'; ...

Verify if the term is present in an external JSON file

I am currently using tag-it to allow users to create tags for their posts. At the moment, users can type any word, but I have a list of prohibited words stored in JSON format. I am looking for a way to integrate this list into the tagit plugin so that if ...

The ng-controller directive fails to function on the content of Kendo tabstrip tabs

My ng-controller is not functioning properly for the kendo tabstrip tab content. Could you please review my code below? <!--tabstripCtrl.js--> angular.module('tabstripApp',[]); var app = angular.module('tabstripApp'); app.con ...

Clicking while holding down the control key in Chrome causes the frame on my website to

My website consists of two frames - the main menu on the left and the content displayed on the right. However, I have noticed that when users use control+click in Chrome to open a new tab, the iframe page is displayed without the menu. Is there a way for ...

What causes Angular2 to detect both reference changes and primitive changes even when the OnPush flag is enabled?

Take a look at this code snippet import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy} from 'angular2/core' @Component({ selector: 'child1', template: ` <div>reference change for entire object: { ...

Ensure all asynchronous Ajax requests have completed before considering the page fully loaded

Many websites, such as YouTube, load the majority of their content after the DOM is ready using JavaScript. How can I ensure that all of these requests have been completed before injecting my code? window.onload = function() {}; The above code snippet do ...

"Utilize binding in ReactJS to maintain the correct context

I'm currently learning how to update states in ReactJS by following a tutorial. In the tutorial, I came across this line of code: this.updateLanguage = this.updateLanguage.bind(this). Although I grasp the basics of 'this' and 'bind&apos ...

What is the best way to update a value and trigger a re-render in ReactJS?

this.state={ value: 'v1', newValue: '', } componentDidMount = () => { let nV = this.state.value + 'received'; this.setState({ newValue: nV, }); } tabClick = (val) => { this.setState({ value: val, ...

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

angularjs dropdown - customize selected item appearance

My dilemma involves a list of countries, each with a code and name. When the list is expanded, I aim to show "code + name" (e.g. "+44 United Kingdom"). However, once a country is selected, I only want to display the code ("+44"). Is it achievable using Ang ...

I'm encountering an issue while trying to install npx create-react-app. I've attempted to use npm globally as well, but unfortunately, neither option is

While trying to install my React app using npx create-react-app my-app, I encountered the following errors: PS C:\Users\NAEEM UR REHMAN\Desktop\react_app> npx create-react-app my-app npm ERR! code ERR_INVALID_URL npm ERR! Invalid U ...

Is it possible to transfer a specific feature from jQuery to Prototype?

I find myself in a situation where I have to use Prototype instead of jQuery, even though I'm not as familiar with it. Can anyone assist me in transforming the following script: var output={}; $$('ul li').each(function(item){ var firstL ...

Removing curly braces and double quotes from an array object can be achieved by iterating through each element

Within this particular project, I have utilized Angular 8 and TypeScript. In the implementation, there exists an array that showcases emails either through user input or via CSV upload. Once the user inputs several emails, a button is available to send in ...