Generalized the timer intervalEvent

Allows a unique event to be broadcast on the $rootScope from each timer so that you can have events fired based on different intervals.
mehdichamouma · Jun 22, 2013 · 4a088d8 · 4a088d8
1 parent 55a86c7
commit 4a088d8
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 Added intervalEvent attribute and an example
 
-Added intervalEvent which broadcasts "event:timer-interval" on the
+Added intervalEvent which broadcasts a named event for each timer on the
 $rootScope every interval.
 
 This allows periodic events that can be consumed, for instance, to save

diff --git a/app/js/timer.js b/app/js/timer.js
@@ -6,7 +6,7 @@ angular.module('timer', [])
       scope: {
           interval: '=interval',
           countdownattr: '=countdown',
-          intervalevent: '=intervalevent'
+          intervaleventattr: '=intervalevent'
       },
       controller: function ($rootScope, $scope, $element) {
         if ($element.html().trim().length === 0) {
@@ -17,7 +17,8 @@ angular.module('timer', [])
         $scope.timeoutId = null; 
         $scope.countdown = $scope.countdownattr && parseInt($scope.countdownattr, 10) > 0 ? parseInt($scope.countdownattr, 10) : undefined;
         $scope.isRunning = false;
-        $scope.intervalEvents = 0;      
+        $scope.intervalEventCount = 0;
+        $scope.intervalEvent = $scope.intervaleventattr;
 
         $scope.$on('timer-start', function (){
           $scope.start();
@@ -31,9 +32,12 @@ angular.module('timer', [])
           $scope.stop();
         });
 
-        //example only: should consume this event in your controller
-        $scope.$on('event:timer-interval', function () {
-        		$scope.intervalEvents++        		
+        //example only: consume specific events in your controller
+        //$scope.$on('event:save', function () {
+        //$scope.$on('event:refreshData', function () {
+        $scope.$on($scope.intervalEvent, function () {
+        		$scope.intervalEventCount++;
+        		$scope.intervalEventName = $scope.intervalEvent        		
         });
 
         function resetTimeout() {
@@ -76,8 +80,8 @@ angular.module('timer', [])
             $scope.minutes = Math.floor((($scope.millis / (1000*60)) % 60));
             $scope.hours = Math.floor((($scope.millis / (1000*60*60)) % 24));
 
-            if($scope.intervalevent != undefined && $scope.intervalevent) {
-            	$rootScope.$broadcast('event:timer-interval');            	
+            if($scope.intervalEvent != undefined) {
+            	$rootScope.$broadcast($scope.intervalEvent);
           	}
 
             $scope.timeoutId = $timeout(function () {

diff --git a/index.html b/index.html
@@ -202,11 +202,22 @@ <h3>
 
         <div class="bs-docs-example">
             <p>
-                The interval event <code ng-non-bindable="">&lt;timer interval=&quot;2000&quot; intervalEvent=&quot;true&quot;/&gt;</code>
-                will fire 'event:timer-interval' on the $rootScope every interval.</p>
-
+							The interval event will fire 'your-named-event' on the $rootScope every interval.
+						</p>
+						<p>
+							Remember the single quotes around the event name. (Angular needs to know it is a string.)</p>
+						<p>
+						  <code ng-non-bindable="">
+						  &lt;timer interval=&quot;1000&quot; intervalEvent=&quot;&#39;event:timer-interval-check-a-thing&#39;&quot;>{{intervalEventName}}: {{intervalEventCount}}&lt;/timer&gt;</code>
+						</p>
+						<p>
+						  <code ng-non-bindable="">
+						  &lt;timer interval=&quot;3000&quot; intervalEvent=&quot;&#39;event:timer-interval-save-document&#39;&quot;>{{intervalEventName}}: {{intervalEventCount}}&lt;/timer&gt;</code>	                
+						</p>
             <h3>
-                <timer interval="2000" intervalEvent="true">Event count: {{intervalEvents}}</timer> 
+                <timer interval="1000" intervalEvent="'event:timer-interval-check-a-thing'">{{intervalEventName}}: {{intervalEventCount}}</timer>
+                <br/>
+                <timer interval="5000" intervalEvent="'event:timer-interval-save-document'">{{intervalEventName}}: {{intervalEventCount}}</timer> 
             </h3>
         </div>
     </section>