JavaScript-Learning/angular/interval/example.html at master · xiazhe/JavaScript-Learning · GitHub

History

94 lines (84 loc) · 3.66 KB

Raw

<!DOCTYPE html>

<head>

<title>interval example</title>

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>

</head>

<body>

<div>

<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>

</body>

</html>

JavaScript-Learning/angular/interval/example.html at master · xiazhe/JavaScript-Learning · GitHub

Expand file tree

Breadcrumbs

example.html

Latest commit

History

Breadcrumbs

example.html

File metadata and controls