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

Include the referrer header when using the chrome.downloads API

I have been working on developing an extension that replicates the Ctrl+Click to save image functionality from Opera 12. In my extension, I am utilizing chrome.downloads.download() in the background script to trigger downloads, while a content script is re ...

Adjust the size of an image with jquery without relying on server-side scripts

I am currently developing an application for Samsung Tizen TV that displays images from live URLs. On one screen, there are approximately 150 images, each with a size of around 1 MB and a resolution of 1920 by 1080. Navigating between these items has bec ...

Retrieve an image from the server and display a preview of it on the client side

I'm currently in the process of fetching an image from a server and previewing it on the client side. I have successfully retrieved the image, but I am unsure of how to asynchronously display it on a web page. axios.get(link,{responseType:'strea ...

Setting up a textarea tooltip using highlighter.js

I'm experimenting with using highlighter.js within a textarea. I've customized their sample by substituting the p with a textarea enclosed in a pre tag (for right-to-left language settings). <div class="article" style="width: 80%; height: 80% ...

Saving the content of a div as a PDF

There are several aspects to consider when it comes to this question, but I'm having trouble finding the information I need. Hopefully someone can provide an answer. Essentially, what I want to achieve is: Imagine a div that is 400 X 400 px in size. ...

Modify a variable for a specific ng-repeat item in AngularJS

I want to expand the text when a user clicks on a read more button: <md-content class="md-padding" layout-xs="column" layout="row" layout-wrap> <div flex-xs flex-gt-xs="50" layout="column" ng-repeat="paquete in paquetes"> <md-card> ...

Ensuring continuous execution of JS EventListener

The other day, I received a solution from someone on this platform for a script that changes the color of a div when scrolling. Here is the code I implemented: const x = document.getElementById("menuID"); window.addEventListener("scroll", () => { ...

Issue with touch events for markers in the context of using Google Maps with AngularJS and Onsen UI

I have successfully set up a map with custom markers using JSFiddle. It works perfectly in this demo: https://jsfiddle.net/LdLy6t90/2/ However, when I integrate the same code into my Onsen UI-based app, the touchevents for Google Map markers do not seem t ...

How can TypeScript objects be serialized?

Is there a reliable method for preserving type information during JSON serialization/deserialization of Typescript objects? The straightforward JSON.parse(JSON.stringify) approach has proven to have several limitations. Are there more effective ad-hoc sol ...

Configuring webpack for live reloading and Hot Module Replacement on static pages

The title of this post may not be very clear, but I appreciate your patience. I am currently in the process of setting up React for an older Rails application that uses static ERBs. Due to the size of the project, I am gradually transitioning towards a Si ...

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...

Using the v-for directive to create sequential lists

I am struggling to display pairs of data from an object based on category using nested v-for loops. The object, categoryArray, contains entries such as {stage 1, red}, {stage 1, blue}, {stage 2, orange}, {stage 3, brown}, {stage 2, green. My desired displ ...

Tips for refreshing the <img> tag using a user image

I am currently designing a bootstrap webpage and trying to implement a feature where the user can input an image, which will then be displayed in a preview modal along with some text provided by the user. The modal is functioning correctly. Here is the co ...

Leveraging Material-UI: Utilize props in useStyles method while employing Array.map()

After delving into the world of passing props to makeStyles in Material-UI, I stumbled upon this insightful answer. The solution presented involves passing props as a variable, which is quite useful. However, my aspiration is to extend this functionality t ...

What is the best way to implement JQuery Ajax in order to invoke a PHP file on the server side, which will then execute returned javascripts?

I am currently working on a client website that requires a cross-domain JQuery Ajax call to a PHP file on my server. The purpose of this call is to query the database for various stored JavaScripts, which will then be returned to the client and executed on ...

What is the best way to customize the link style for individual data links within a Highcharts network graph?

I am currently working on creating a Network Graph that visualizes relationships between devices and individuals in an Internet of Things environment. The data for the graph is extracted from a database, including information about the sender and receiver ...

What is the best way to connect multiple web pages together?

Hello everyone, I could really use some assistance with a problem I'm facing. As a newcomer to web development, I have a question about navigation bars. I've successfully created a basic webpage with a navigation bar, but now I'm unsure how ...

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

How can you integrate Webpack loader syntax (including imports, exports, and expose) with ECMAScript 6 imports?

For my Angular 1.4 project, I am utilizing Webpack and Babel to write in ECMA6 syntax. While I prefer using ECMAScript 6 import/export default module syntax, there are instances where I need to employ Webpack loaders like expose to globally expose modules, ...

How can I eliminate the scrollbar from appearing on all browsers when visiting my website?

I've encountered an issue while building my portfolio with React.js. I'm having trouble removing the scrollbar. I've attempted using overflow: hidden for the parent element and overflow: scroll for the child div, but it's not producing ...