<body ng-app="intervalExample">
<div>
<div ng-controller="ExampleController">
<label>Tarih Formatı: <input ng-model="format"></label> <hr/>
Geçerli zaman: <span my-current-time="format"></span>
<hr/>
can 1 : <font color='red'>{{kan_1}}</font>
can 2 : <font color='red'>{{kan_2}}</font>
<button type="button" data-ng-click="kavga()">kavga</button>
<button type="button" data-ng-click="dur()">Dur</button>
<button type="button" data-ng-click="sifirla()">sıfırla</button>
</div>
</div>
</body> angular.module('intervalExample', [])
.controller('ExampleController', ['$scope', '$interval',
function($scope, $interval) {
$scope.format = 'M/d/yy h:mm:ss a';
$scope.kan_1 = 100;
$scope.kan_2 = 120;
var stop;
$scope.kavga = function() {
// Don't start a new fight if we are already fighting
if ( angular.isDefined(stop) ) return;
stop = $interval(function() {
if ($scope.kan_1 > 0 && $scope.kan_2 > 0) {
$scope.kan_1 = $scope.kan_1 - 3;
$scope.kan_2 = $scope.kan_2 - 4;
} else {
$scope.dur();
}
}, 100);
};
$scope.dur = function() {
if (angular.isDefined(stop)) {
$interval.cancel(stop);
stop = undefined;
}
};
$scope.sifirla = function() {
$scope.kan_1 = 100;
$scope.kan_2 = 120;
};
$scope.$on('$destroy', function() {
// Make sure that the interval is destroyed too
$scope.dur();
});
}])
// 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);
});
}
}]);
External CSS
This Pen doesn't use any external CSS resources.