Angular Timer not working

Question

I want to display a count down timer.I have been referring the following page http://siddii.github.io/angular-timer/

But i am getting the below error.

Error: Invalid isolate scope definition for directive timer: @?

Could anybody tell me what i am i missing out.

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-timer.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</body>
</html>

app.js

var appModule=angular.module('app', ['timer']);

What version of Angular are you using?

Wayne Ellery
– Wayne Ellery

2015-05-20 06:53:17 +00:00
Commented May 20, 2015 at 6:53 — Wayne Ellery
– Wayne Ellery, Commented May 20, 2015 at 6:53

JcDenton86 · Accepted Answer · 2015-05-20 08:05:23Z

13

Try this. It's working:

I added moment.js and humanizeDuration.js libraries based on errors I was getting.

Hope it helps

<!DOCTYPE html>
<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
   <script src="https://raw.githubusercontent.com/EvanHahn/HumanizeDuration.js/master/humanize-duration.js"></script>
   <script src="https://raw.githubusercontent.com/siddii/angular-timer/master/dist/angular-timer.js"></script>
  </head>

   <body ng-app="app">

    <div ng-controller="ctrl">
      <timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
	</div>
	
	<script>
	   var app = angular.module('app',['timer']);
			
	   app.controller('ctrl', function($scope){});
	</script>
   </body>
</html>

edited May 20, 2015 at 8:05

answered May 20, 2015 at 7:43

JcDenton86

9321 gold badge12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nisha shetty Over a year ago

I upgraded angular to AngularJS v1.1.4 and included moment.js and humanize.js.Timer is getting displayed now but the timer is not ticking.The timer is getting changed only when i refresh the page

JcDenton86 Over a year ago

Do you get any errors? Did you try the above working HTML code as is? Try also with Angular 1.3.1

Prasad Over a year ago

@JcDenton86 how can i use my Controller scopes instead of Isolated Scope ?

JcDenton86 Over a year ago

@N.V.Prasad, is this a new question (in your comment)? Does my answer solved your problem?

Prasad Over a year ago

@JcDenton86 Actually it served the Cause in Little Different way i tried to used Scope from the controller which is not Possible so u just Converted the time into Seconds like Your answer it Works Thanks

Rick · Accepted Answer · 2016-02-28 19:58:58Z

2

You need to pull in the right libraries in order for the timer to work.

bower install momentjs --save
bower install humanize-duration --save

Now in your HTML add the dependencies

<script type="text/javascript" src="bower_components/humanize-duration/humanize-duration.js"></script>

<script type="text/javascript" src="bower_components/momentjs/min/moment-with-locales.min.js"></script>

answered Feb 28, 2016 at 19:58

Rick

13.6k3 gold badges46 silver badges42 bronze badges

Collectives™ on Stack Overflow

Angular Timer not working

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related