Invalid Syntax: The token '21' is found unexpectedly at column 12 in the expression [2013-08-28 21:10:14] beginning at [21:10:14]

I'm in the process of creating a straightforward directive for a date countdown. However, I've hit a roadblock with this particular error:

Syntax Error: Token '21' is an unexpected token at column 12 of the expression [2013-08-28 21:10:14] starting at [21:10:14]

I honestly have no idea how to resolve it.

Here's a link to my example on jsfiddle:

http://jsfiddle.net/5eFTB/1/

And here's the CoffeeScript version since the JavaScript one is just too lengthy:

.directive "timer", ["$compile", ($compile) ->
  restrict: "E"
  replace: false
  scope:
   endTimeAttr: "=endTime"

  controller: ($scope, $element) ->
   _second = 1000
   _minute = _second * 60
   _hour = _minute * 60
   _day = _hour * 24
   timer = undefined
   showRemaining = ->
     now = new Date()
     distance = end - now
     if distance < 0
       clearInterval timer
       setExpired "EXPIRED!"
       return
     $scope.days = Math.floor(distance / _day)
     $scope.hours = Math.floor((distance % _day) / _hour)
     $scope.minutes = Math.floor((distance % _hour) / _minute)
     $scope.seconds = Math.floor((distance % _minute) / _second)
   setExpired = (value) ->
     content = angular.element("<div></div>").html(value).contents()
     compiled = $compile(content)
     element.html ""
     element.append content
     compiled scope
     end = new Date($scope.endTime)
   timer = setInterval(showRemaining, 1000)
 ]

Answer №1

Ensure that the data is passed using a model variable, not as a string.

If you encounter any other issues, refer to the following comments:

<div ng-init="testapp" ng-controller="ctrl">
    <timer end-time="t">{{hours}} hours, {{minutes}} minutes, {{seconds}} seconds</timer>
</div>

app = angular.module('testapp', [])
app.directive('timer', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        replace: false,
        scope: {
            endTimeAttr: '=endTime'
        },
        controller: function ($scope, $element) {

            var end = new Date($scope.endTimeAttr); //use endTimeAttr instead of endTime

            var _second = 1000;
            var _minute = _second * 60;
            var _hour = _minute * 60;
            var _day = _hour * 24;
            var timer;

            function showRemaining() {
                var now = new Date();
                var distance = end - now;
                if (distance < 0) {
                    clearInterval(timer);
                    setExpired('EXPIRED!');
                    return;
                }
                $scope.days = Math.floor(distance / _day);
                $scope.hours = Math.floor((distance % _day) / _hour);
                $scope.minutes = Math.floor((distance % _hour) / _minute);
                $scope.seconds = Math.floor((distance % _minute) / _second);

                $scope.$apply(); 
            }

            function setExpired(value) {
                var content = angular.element('<div></div>').html(value).contents();
                var compiled = $compile(content);
                element.html('');
                element.append(content);
                compiled(scope)
            }

            timer = setInterval(showRemaining, 1000); 
        }
    };
}]);

function ctrl($scope){
    $scope.t = "2013-08-28 21:10:14";
}

View Working Demo

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

What is the best way to divide a GraphQL schema to avoid circular dependencies?

I have a question that is similar to the issue of circular dependency in GraphQL code discussed on Stack Overflow, but my problem lies within JavaScript (ES6). The size of my schema definition has become too large, and I am struggling to find a way to bre ...

When using AngularJS filter, the comparator will evaluate to true and display the ng-repeat list even when the input

Recently, I stumbled upon this interesting example fiddle showcasing the use of a comparator parameter to filter exact matches: http://jsfiddle.net/api/post/library/pure/ The priority is supposed to be a number between 1-100, but due to inputting it as t ...

Could a personalized "exit page" confirmation be created?

I am looking for a solution that will allow me to pause the execution of my code, display a dialog box, and then resume execution only after a specific button is pressed. For example, if a user navigates from one page to another on my website, I want a di ...

How can I add a character at a precise location while keeping the existing tags intact

Latest Update After further testing, it seems that the code performs well with a faux spacer, but runs into issues with the regex. The following scenarios work correctly: Selecting words above or below the a tag Selecting just one line directly above or ...

Error: Authentication error. fatal: Unable to access the remote repository." encountered while executing the command "yarn install

Today, while developing a web application, I encountered an issue with the "yarn install" command. Upon running "yarn install", the console displayed an error message: "Host key verification failed. fatal: Could not read from remote repository." I attemp ...

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

How can I incorporate the v-model="item.checked" as a condition within the validations() function below? <table> <tr v-for="(item, i) of $v.timesheet.items.$each.$iter" > <div> <td> ...

Executing a Node.js program using the command line without having to type out the word 'node'

I am currently working on a Node.js package that includes a command-line utility. Right now, alacon.js is situated in the root of the package. To execute this utility, I have to use the word node followed by the utility's name, like so: node alacon ...

Ways to send information and retrieve outcomes employing the MEAN stack and ngResource

Currently, I am developing an innovative application and have opted for the highly efficient MEAN stack technology. Within my AngularJS framework, I am utilizing ngResource for seamless CRUD operations. Would greatly appreciate any expert advice on how t ...

Exploring AngularJS for real-time updates from a persistent database

Hello, I'm new to Angular and currently working on an app that requires frequent polling of a URL every second. The retrieved data needs to be stored persistently for access across multiple views and controllers. To handle this, I've placed the ...

Access external link without leaving current page

Dear webmasters, I am seeking advice, tools, or guidance to solve a simple problem. I have my own HTTP server that responds to HTTP requests. Example: If I visit the link: http://ip_server/link1, it performs a specific functionality If I visit the lin ...

Retrieve all data points if both latitude and longitude are present in the XML dataset

XML data to retrieve details <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <results> <result> <Country_Code>IN</Country_Code> <Country_Name>India</Country_Name> <Region_Nam ...

Changing the mouse cursor dynamically with Angular programming

What is the recommended approach for changing the mouse cursor programmatically in Angular? For instance: HTML: <div [style.cursor]="cursorStyle">Content goes here</div> or <div [ngStyle]="{ 'cursor': cursorStyle ...

jquery.event.drag - Execute code for each increment of X pixels dragged

Currently, I am utilizing jquery.event.drag.js for a project I am developing. My goal is to execute a script after every interval of X pixels dragged along the X axis. Below is a snippet of the code I have implemented. $('body').drag(function( e ...

What are the best ways to incorporate mistakes into my JavaScript mortgage calculator?

I am struggling to set up my calculator so that it triggers an error message if the APR goes over 25% or falls below 0. Also, the Loan Term should be greater than 0 and less than or equal to 40, otherwise display an error message. I have attempted differen ...

Efficiently transferring a style property to a child component as a computed property in Vue.js

Currently, I am facing an issue that involves too much logic in my inline style, which I would like to move inside a computed property. While I understand that this is the correct approach, I am unsure of how to implement it. To provide a clearer understa ...

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

Utilizing Node.js with Redis for organizing data efficiently

Currently, I am in the process of configuring a Redis cache system for storing incoming JSON data in a specific format. My goal is to create an ordered list structure to accommodate the large volume of data that will be stored before eventual deletion. Th ...

Is it possible to merge string and span elements to create a unified element?

In my current project using React, I am dealing with an array of strings and JSX Elements. For instance, the array has items like: [<span class="name">JCrew0</span>, "edited this document"]. I am attempting to display thes ...

Tips for implementing React Browser Router within Material UI Drawer

I'm currently exploring how to implement Browser Router in React to populate the content section of a Material UI Drawer. While my code successfully links menu options to components displayed within the drawer's content section, a problem arises ...

Resetting the selected value in an Angular2 select element after the user makes a change

I have a dropdown menu which the user can select an option from. Initially it has a default value and when the user makes a new selection, I need to ask for confirmation by showing a message "are you sure?". If the answer is NO, then I should revert back t ...