| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Example - example-example61-debug</title> |
| |
| |
| <script src="../../../angular.js"></script> |
| |
| |
| |
| </head> |
| <body ng-app="time"> |
| <script> |
| function Ctrl2($scope,$interval) { |
| $scope.format = 'M/d/yy h:mm:ss a'; |
| $scope.blood_1 = 100; |
| $scope.blood_2 = 120; |
| |
| var stop; |
| $scope.fight = function() { |
| // Don't start a new fight if we are already fighting |
| if ( angular.isDefined(stop) ) return; |
| |
| stop = $interval(function() { |
| if ($scope.blood_1 > 0 && $scope.blood_2 > 0) { |
| $scope.blood_1 = $scope.blood_1 - 3; |
| $scope.blood_2 = $scope.blood_2 - 4; |
| } else { |
| $scope.stopFight(); |
| } |
| }, 100); |
| }; |
| |
| $scope.stopFight = function() { |
| if (angular.isDefined(stop)) { |
| $interval.cancel(stop); |
| stop = undefined; |
| } |
| }; |
| |
| $scope.resetFight = function() { |
| $scope.blood_1 = 100; |
| $scope.blood_2 = 120; |
| } |
| |
| $scope.$on('$destroy', function() { |
| // Make sure that the interval is destroyed too |
| $scope.stopFight(); |
| }); |
| } |
| |
| angular.module('time', []) |
| // Register the 'myCurrentTime' directive factory method. |
| // We inject $interval and dateFilter service since the factory method is DI. |
| .directive('myCurrentTime', function($interval, dateFilter) { |
| // return the directive link function. (compile function not needed) |
| return function(scope, element, attrs) { |
| var format, // date format |
| stopTime; // so that we can cancel the time updates |
| |
| // used to update the UI |
| function updateTime() { |
| element.text(dateFilter(new Date(), format)); |
| } |
| |
| // watch the expression, and update the UI on change. |
| scope.$watch(attrs.myCurrentTime, function(value) { |
| format = value; |
| updateTime(); |
| }); |
| |
| stopTime = $interval(updateTime, 1000); |
| |
| // listen on DOM destroy (removal) event, and cancel the next UI update |
| // to prevent updating time ofter the DOM element was removed. |
| element.bind('$destroy', function() { |
| $interval.cancel(stopTime); |
| }); |
| } |
| }); |
| </script> |
| |
| <div> |
| <div ng-controller="Ctrl2"> |
| Date format: <input ng-model="format"> <hr/> |
| Current time is: <span my-current-time="format"></span> |
| <hr/> |
| Blood 1 : <font color='red'>{{blood_1}}</font> |
| Blood 2 : <font color='red'>{{blood_2}}</font> |
| <button type="button" data-ng-click="fight()">Fight</button> |
| <button type="button" data-ng-click="stopFight()">StopFight</button> |
| <button type="button" data-ng-click="resetFight()">resetFight</button> |
| </div> |
| </div> |
| </body> |
| </html> |
