aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/interval.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/ng/interval.js')
-rw-r--r--src/ng/interval.js82
1 files changed, 82 insertions, 0 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,