knowhow-server
Version:
A personal workflow engine that can manage and use any network connected host
142 lines (128 loc) • 8.11 kB
HTML
<a href="http://github.com/angular/angular.js/tree/v1.2.9/src/ng/interval.js#L10" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/interval.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$interval</code>
<div><span class="hint">service in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ng-interval-page"><p>Angular's wrapper for <code>window.setInterval</code>. The <code>fn</code> function is executed every <code>delay</code>
milliseconds.</p>
<p>The return value of registering an interval function is a promise. This promise will be
notified upon each tick of the interval, and will be resolved after <code>count</code> iterations, or
run indefinitely if <code>count</code> is not defined. The value of the notification will be the
number of iterations that have run.
To cancel an interval, call <code>$interval.cancel(promise)</code>.</p>
<p>In tests you can use <a href="api/ngMock.$interval#methods_flush"><code>$interval.flush(millis)</code></a> to
move forward by <code>millis</code> milliseconds and trigger any functions scheduled to run in that
time.</p>
<div class="alert alert-warning">
<strong>Note</strong>: Intervals created by this service must be explicitly destroyed when you are finished
with them. In particular they are not automatically destroyed when a controller's scope or a
directive's element are destroyed.
You should take this into consideration and make sure to always cancel the interval at the
appropriate moment. See the example below for more details on how and when to do this.
</div></div></div>
<h2 id="usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$interval(fn, delay[, count][, invokeApply]);</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>fn</td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="ng-interval-page"><p>A function that should be called repeatedly.</p>
</div></td></tr><tr><td>delay</td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="ng-interval-page"><p>Number of milliseconds between each function call.</p>
</div></td></tr><tr><td>count <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="ng-interval-page"><p>Number of times to repeat. If not set, or 0, will repeat
indefinitely.</p>
</div> <p><em>(default: 0)</em></p></td></tr><tr><td>invokeApply <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="ng-interval-page"><p>If set to <code>false</code> skips model dirty checking, otherwise
will invoke <code>fn</code> within the <a href="api/ng.$rootScope.Scope#methods_$apply"><code>$apply</code></a> block.</p>
</div> <p><em>(default: true)</em></p></td></tr></tbody></table><h4 id="usage_returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-promise">promise</a></td><td><div class="ng-interval-page"><p>A promise which will be notified on each iteration.</p>
</div></td></tr></table></div>
<div class="member method"><h2 id="methods">Methods</h2>
<ul class="methods"><li><h3 id="methods_cancel">cancel(promise)</h3>
<div class="cancel"><div class="ng-interval-cancel-page"><p>Cancels a task associated with the <code>promise</code>.</p>
</div><h5 id="methods_cancel_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>promise</td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="ng-interval-cancel-page"><p>Promise returned by the <code>$interval</code> function.</p>
</div></td></tr></tbody></table><h5 id="methods_cancel_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="ng-interval-cancel-page"><p>Returns <code>true</code> if the task was successfully canceled.</p>
</div></td></tr></table></div>
</li>
</ul>
</div>
<h2 id="example">Example</h2>
<div class="example"><div class="ng-interval-page"><h4 id="example_source">Source</h4>
<div source-edit="time" source-edit-deps="angular.js script.js" source-edit-html="index.html-155" source-edit-css="" source-edit-js="script.js-154" source-edit-json="" source-edit-unit="" source-edit-scenario="" source-edit-protractor=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-155" ng-html-wrap="time angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-155">
<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>
</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-154"></pre>
<script type="text/ng-template" id="script.js-154">
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><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="time" ng-set-html="index.html-155" ng-eval-javascript="script.js-154"></div>
</div></div>
</div>