diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/ng/interval.js | 82 | ||||
| -rw-r--r-- | src/ng/timeout.js | 87 |
2 files changed, 82 insertions, 87 deletions
diff --git a/src/ng/interval.js b/src/ng/interval.js index 2ad3a7f1..1ae13648 100644 --- a/src/ng/interval.js +++ b/src/ng/interval.js @@ -32,6 +32,88 @@ function $IntervalProvider() { * @param {boolean=} [invokeApply=true] If set to `false` skips model dirty checking, otherwise * will invoke `fn` within the {@link ng.$rootScope.Scope#methods_$apply $apply} block. * @returns {promise} A promise which will be notified on each iteration. + * + * @example + <doc:example module="time"> + <doc:source> + <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 { + $interval.cancel(stop); + } + }, 100); + }; + + $scope.stopFight = function() { + $interval.cancel(stop); + stop = undefined; + }; + + $scope.resetFight = function() { + $scope.blood_1 = 100; + $scope.blood_2 = 120; + } + } + + 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> + + </doc:source> + </doc:example> */ function interval(fn, delay, count, invokeApply) { var setInterval = $window.setInterval, diff --git a/src/ng/timeout.js b/src/ng/timeout.js index 51e627b9..511a0a05 100644 --- a/src/ng/timeout.js +++ b/src/ng/timeout.js @@ -32,93 +32,6 @@ function $TimeoutProvider() { * @returns {Promise} Promise that will be resolved when the timeout is reached. The value this * promise will be resolved with is the return value of the `fn` function. * - * @example - <doc:example module="time"> - <doc:source> - <script> - function Ctrl2($scope,$timeout) { - $scope.format = 'M/d/yy h:mm:ss a'; - $scope.blood_1 = 100; - $scope.blood_2 = 120; - - var stop; - $scope.fight = function() { - stop = $timeout(function() { - if ($scope.blood_1 > 0 && $scope.blood_2 > 0) { - $scope.blood_1 = $scope.blood_1 - 3; - $scope.blood_2 = $scope.blood_2 - 4; - $scope.fight(); - } else { - $timeout.cancel(stop); - } - }, 100); - }; - - $scope.stopFight = function() { - $timeout.cancel(stop); - }; - - $scope.resetFight = function() { - $scope.blood_1 = 100; - $scope.blood_2 = 120; - } - } - - angular.module('time', []) - // Register the 'myCurrentTime' directive factory method. - // We inject $timeout and dateFilter service since the factory method is DI. - .directive('myCurrentTime', function($timeout, dateFilter) { - // return the directive link function. (compile function not needed) - return function(scope, element, attrs) { - var format, // date format - timeoutId; // timeoutId, 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(); - }); - - // schedule update in one second - function updateLater() { - // save the timeoutId for canceling - timeoutId = $timeout(function() { - updateTime(); // update DOM - updateLater(); // schedule another update - }, 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() { - $timeout.cancel(timeoutId); - }); - - updateLater(); // kick off the UI update process. - } - }); - </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> - - </doc:source> - </doc:example> */ function timeout(fn, delay, invokeApply) { var deferred = $q.defer(), |