1.3.0-beta.10/docs/examples/example-example63/index-debug.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example63-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.on('$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>