angularjs-$interval

来源：互联网发布：吉诺比利底线传球知乎编辑：程序博客网时间：2024/06/10 23:56

http://www.webfront-js.com/articaldetail/86.html

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>Example - example-interval-service-production</title>    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>    </head><body ng-app="intervalExample">  <script>  angular.module('intervalExample', [])    .controller('ExampleController', ['$scope', '$interval',      function($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();        });      }])    // Register the 'myCurrentTime' directive factory method.    // We inject $interval and dateFilter service since the factory method is DI.    .directive('myCurrentTime', ['$interval', 'dateFilter',      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 after the DOM element was removed.          element.on('$destroy', function() {            $interval.cancel(stopTime);          });        }      }]);</script><div>  <div ng-controller="ExampleController">    <label>Date format: <input ng-model="format"></label> <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><!-- Copyright 2017 Google Inc. All Rights Reserved.Use of this source code is governed by an MIT-style license thatcan be found in the LICENSE file at http://angular.io/license-->

0 0