docs($interval): update example to use a module

This commit is contained in:
Brian Ford
2014-07-07 23:18:52 -07:00
parent f75f4bce82
commit cdefbe3425
+38 -37
View File
@@ -42,25 +42,27 @@ function $IntervalProvider() {
* @returns {promise} A promise which will be notified on each iteration.
*
* @example
* <example module="time">
* <file name="index.html">
* <script>
* function Ctrl2($scope,$interval) {
* $scope.format = 'M/d/yy h:mm:ss a';
* $scope.blood_1 = 100;
* $scope.blood_2 = 120;
* <example module="intervalExample">
* <file name="index.html">
* <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;
* 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;
* $scope.blood_1 = $scope.blood_1 - 3;
* $scope.blood_2 = $scope.blood_2 - 4;
* } else {
* $scope.stopFight();
* $scope.stopFight();
* }
* }, 100);
* };
@@ -75,22 +77,21 @@ function $IntervalProvider() {
* $scope.resetFight = function() {
* $scope.blood_1 = 100;
* $scope.blood_2 = 120;
* }
* };
*
* $scope.$on('$destroy', function() {
* // Make sure that the interval is destroyed too
* // Make sure that the interval nis 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) {
* })
* // 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
* stopTime; // so that we can cancel the time updates
*
* // used to update the UI
* function updateTime() {
@@ -106,28 +107,28 @@ function $IntervalProvider() {
* 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.
* // to prevent updating time after the DOM element was removed.
* element.bind('$destroy', function() {
* $interval.cancel(stopTime);
* });
* }
* });
* </script>
* </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>
* <div ng-controller="ExampleController">
* 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>
*
* </file>
* </file>
* </example>
*/
function interval(fn, delay, count, invokeApply) {