angular-js example cleanup

siddii · siddii · commit b1f7153559e7 · 2013-05-28T14:54:31.000-05:00
diff --git a/angular-js-example.html b/angular-js-example.html
@@ -1,25 +1,41 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Angular Timer Directive - Simple AngularJS Example</title>
-
+    <title>Timer Directive used from AngularJS</title>
     <script src="angular/angular.min.js"></script>
     <script src="app/js/timer.js"></script>
     <script>
         angular.module('MyApp', ['timer']);
+        function MyAppController($scope) {
+            $scope.timerRunning = true;
+
+            $scope.startTimer = function (){
+                $scope.$broadcast('timer-start');
+                $scope.timerRunning = true;
+            };
+
+            $scope.stopTimer = function (){
+                $scope.$broadcast('timer-stop');
+                $scope.timerRunning = false;
+            };
+        }
+        MyAppController.$inject = ['$scope'];
     </script>
 </head>
 <body ng-app="MyApp">
-    <div>
-        <timer id="timer1"></timer>
-    </div>
-    <div>
-        <timer interval="5000" id="timer2"></timer>
+    <div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
+        <h2>Single Timer</h2>
+        <h3><timer/></h3>
+        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
+        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
     </div>
-    <div>
-        <timer id="timer3">
-            {{minutes}} minutes, {{seconds}} seconds.
-        </timer>
+    <br/>
+    <div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
+        <h2>Multiple Timers</h2>
+        <h3>Timer 1: <timer interval="2000"/></h3>
+        <h3>Timer 2: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
+        <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
+        <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
     </div>
 </body>
 </html>
diff --git a/app/js/timer.js b/app/js/timer.js
@@ -6,12 +6,20 @@ angular.module('timer', [])
       scope: {interval: '=interval'},
       controller: function ($scope, $element) {
         if ($element.html().trim().length === 0) {
-          $element.append($compile('<h3>{{timeTaken}}</h3>')($scope));
+          $element.append($compile('<span>{{timeTaken}}</span>')($scope));
         }
 
         $scope.startTime = null;
         $scope.timeoutId = null;
 
+        $scope.$on('timer-start', function (){
+          $scope.start();
+        });
+
+        $scope.$on('timer-stop', function (){
+          $scope.stop();
+        });
+
         $scope.start = $element[0].start = function () {
           $scope.startTime = new Date();
           updateTime();
diff --git a/index.html b/index.html
@@ -85,7 +85,7 @@ <h1>Introduction</h1>
         <h3>Basic Example</h3>
         <div class="bs-docs-example">
             <p>This simple directive <code>&lt;timer /&gt;</code> markup code will start the timer with the default option of ticking every 1 millisecond</p>
-            <div><timer id="timer1"/></div>
+            <h3><timer id="timer1"/></h3>
             <button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
             <button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
         </div>
@@ -95,7 +95,7 @@ <h3>Basic Example</h3>
         <h3>Timer with interval example</h3>
         <div class="bs-docs-example">
             <p>This directive <code>&lt;timer interval="1000" id="timer2"/&gt;</code> markup code will run the timer tick every second</p>
-            <div><timer interval="1000" id="timer2"/></div>
+            <h3><timer interval="1000" id="timer2"/></h3>
             <button type="button" class="btn" onclick="startTimer('timer1', this)">Start</button>
             <button type="button" class="btn" onclick="stopTimer('timer1', this)">Stop</button>
         </div>
@@ -105,7 +105,7 @@ <h3>Timer with interval example</h3>
         <h3>Formatted timer</h3>
         <div class="bs-docs-example">
             <p>This directive <code>&lt;timer interval="1000" id="timer3"/&gt;</code> markup code will run the timer tick every second</p>
-            <div><timer id="timer3">{{minutes}} minutes, {{seconds}} seconds.</timer></div>
+            <h3><timer id="timer3">{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
             <button type="button" class="btn" onclick="startTimer('timer3', this)">Start</button>
             <button type="button" class="btn" onclick="stopTimer('timer3', this)">Stop</button>
         </div>
