What causes the [$parse:syntax] error when I tap on the arrow icon within Google Maps?

.controller('MapCtrl', [
    '$scope', '$http', '$location', '$window',
 
function ($scope, $http, $location, $window) {
    $http.get('****').success(function (data, dealers, response) {
        function initialize() {
            var serverData = data;
            $scope.locations = [];
            for (var i = 0; i < serverData.length; i++) {
                var modal = [
                data[i].Store_Name, data[i].S_Location.Latitude, data[i].S_Location.Longitude, i, 'images/arrow.svg', data[i].S_Address];
                $scope.locations.push(modal); 
            }
            console.log($scope.locations);
            //---------------------------------------------------------
            //console i am getting like this
            var locations = [
                ['nokia store', '12.971599', '77.594563', '1', 'images/arrow.svg.svg', '55a78953815356700bee698f'],
                ['samsung store', '12.9065534', '77.5774802', '2', 'images/arrow.svg.svg', '55a786d1815356700bee6982'], ];
            //----------------------------------------------------------
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(12.9667, 77.5667),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
            var infowindow = new google.maps.InfoWindow();
            var marker, i;
            for (i = 0; i < $scope.locations.length; i++) {
                //console.log($scope.locations[i][1]);
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng($scope.locations[i][1], $scope.locations[i][2]),
                    map: map,
                    icon: $scope.locations[i][4],
                    animation: google.maps.Animation.DROP,
                });
                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function() {
//console.log($scope.locations[i][8]);

  var compiled = $compile('<button ng-click="navigate('+$scope.locations[i][5]+')">Navigate</button>')($scope);

var infowindow = new google.maps.InfoWindow({content: compiled[0]});         
infowindow.open(map, marker);
   $scope.$apply();
   
        }
                })(marker, i));
            }
            $scope.map = map;
        }
        $scope.navigate(id) {
            console.log(id);
        }
    });

Clicking on the icon triggers an error in the console

Error: [$parse:syntax] Syntax Error: Token 'b24782c7d354f30cda0e89' is unexpected, expecting [)] at column 12 of the expression [navigate(55b24782c7d354f30cda0e89)] starting at [b24782c7d354f30cda0e89)]. http://errors.angularjs.org/1.3.13/$parse/syntax?p0=b24782c7d354f30cda0e89&p1=is%20unexpected%2C%20expecting%20%5B)%5D&p2=12&p3=navigate(55b24782c7d354f30cda0e89)&p4=b24782c7d354f30cda0e89) at REGEX_STRING_REGEXP (http://localhost:8100/bower_components/angular/angular.js:63:12) at Parser.throwError (http://localhost:8100/bower_components/angular/angular.js:12011:11) at Parser.consume (http://localhost:8100/bower_components/angular/angular.js:12053:12) at Parser.functionCall (http://localhost:8100/bower_components/angular/angular.js:12323:10) at Parser.primary (http://localhost:8100/bower_components/angular/angular.js:11995:24) at Parser.unary (http://localhost:8100/bower_components/angular/angular.js:12271:19) at Parser.multiplicative (http://localhost:8100/bower_components/angular/angular.js:12254:21) at Parser.additive (http://localhost:8100/bower_components/angular/angular.js:12245:21) at Parser.relational (http://localhost:8100/bower_components/angular/angular.js:12236:21) at Parser.equality (http://localhost:8100/bower_components/angular/angular.js:12227:21) (anonymous function) @ angular.js:11607$get @ angular.js:8557invokeLinkFn @ angular.js:8221nodeLinkFn @ angular.js:7729compositeLinkFn @ angular.js:7078publicLinkFn @ angular.js:6957(anonymous function) @ controllers.js:630S.trigger @ main.js:20(anonymous function) @ VM11388:37(anonymous function) @ VM11381:10L.ff @ VM11381:195L.Dk @ VM11381:195S.trigger @ main.js:20eb @ main.js:22S.trigger @ main.js:20L.Sk @ VM11381:65(anonymous function) @ main.js:21

Answer №1

When you encounter the parse error labeled as `$parse`, it is usually due to the fact that the variable `locations[i][5]` contains a string value. This string is then directly inserted into the `navigate` function, resulting in something like `ng-click="navigate(55a78953815356700bee698f)"`. As a result, when the `div` is being compiled, an error is thrown during the parsing process.

To resolve this issue, you can reference the scope variable inside the button with the appropriate index.

Code

$compile('<button ng-click="navigate(locations['+i+'][5])">Navigate</button>')($scope);

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

Email the jQuery variable to a recipient

I'm facing an issue with sending a jQuery variable containing HTML and form values via email using a separate PHP file with the @mail function. My attempt involves using the jQuery $.ajax function on form submit to send this variable, but unfortunate ...

How can I use JavaScript to retrieve the current time from the time.nist.gov NTP server?

Looking for guidance! I'm new to coding and would greatly appreciate detailed instructions and examples. I've been struggling for hours trying to solve this issue - the online resources I found have not been helpful at all. Unfortunately, I don&a ...

Issue with the dynamic updating of props

Every time a radio button is clicked within Test.js, the handleclick function executes, updating an array. However, the issue lies in not sending this updated array back to graph_test.js. As a result, graph_test.js only receives the initial array filled wi ...

showing a pop-up message when a specific javascript function is triggered

Here is a unique code snippet showcasing a customized dialog box created with HTML, CSS, and JavaScript. The dialog box is displayed when a button is clicked. <!DOCTYPE html> <html> <head> <style> /* Custom Modal Styles */ .modal { ...

Developing maintenance logic in Angular to control subsequent API requests

In our Angular 9 application, we have various components, some of which have parent-child relationships while others are independent. We begin by making an initial API call that returns a true or false flag value. Depending on this value, we decide whether ...

Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...

How should values be properly stored in a constant using mongoose?

Within my user model, I have included timestamps. I am seeking a way to retrieve the createdAt date and store it in a variable. My initial attempt was: const date = await User.find({ serial: serialId, }).select('-_id createdAt'); The result re ...

The ajaxStart event does not seem to be triggering when clicked on

I am having trouble adding a loader to my site using the ajaxStart and ajaxStop requests to show and hide a div. The issue is that these requests are not being triggered by button onclick events. <style> // CSS for loader // Another class with o ...

Experiencing difficulties with Angular programming and struggling with setting up a controller to display database query results in the

Currently, I am working on a project that involves the use of MongoDB, ExpressJS, AngularJS, and NodeJS. The main functionality of the application is to send GET requests to the database when users click on specific categories. I have successfully tested t ...

Display jQuery created hyperlinks in a modal window

I have taken on the task of revamping my school's outdated website. Please excuse the messy CSS and HTML as I am currently in the process of cleaning it up. Additionally, I am not well-versed in Javascript, so... Now, onto the issue at hand. The web ...

Unable to host static content with express

Currently, I am working with Jade and Express to serve static files. Below is the Express code I am using: app.use(express.static(__dirname + "/frontend")); Additionally, here is the Jade code within my layout.jade file: link(rel='stylesheet', ...

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

Error: Unable to access property 'addEventListener' of null. This issue appears to be related to a Chrome extension

It's been frustrating dealing with this persistent error. I'm in the process of creating my very first chrome extension and for some reason, I just can't seem to pinpoint what's wrong with this particular code snippet: let beginButton = ...

Utilizing jQuery to place an element beside another and maintain its position

I need ElementA to be positioned next to ElementB as shown in this example. The key difference is that I want ElementA to move along with ElementB if the latter is relocated. Is there a way to keep a specific element fixed to another one? Re-calculating ...

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

Utilizing AngularJS to create bound checkboxes

I am struggling with two checkboxes, one with Data Binding and the other without Data Binding. The code snippet below illustrates this: <html ng-app="notesApp"> <head><title>Notes App</title></head> <body ng-contro ...

Issue encountered during Heroku deployment: Failed to build React app. When attempting to push changes to Heroku, an unexpected end of input error was received instead of the expected result. This error occurred on an unidentified file at

Encountering a parsing error while attempting to deploy a React app on Heroku using git push heroku master. The app built successfully yesterday, but since then some media queries were added by another contributor to various .scss files. The primary error ...

The performance of CasperJS when used with AngularJS is subpar

If I click on just one button in Casper, everything works perfectly. The code below passes the test. casper.then(function() { this.click('#loginB'); this.fill('#loginEmailField', { 'loginEmail': '<a ...

XMLHttpRequest problem: receiving status code 0 from both local and live server

I'm struggling to make this XMLHttpRequest work correctly. This is my first time using AJAX, so I'm not sure if I've formatted everything properly. I've searched all over the internet and found similar information and examples, but cert ...

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

I am currently working on implementing an Angular 5 Material Data Table with two filter options. One filter is a text input, while the other is a dropdown selection to filter based on a specific field value. The dropdown is implemented using a "mat-select" ...