web-angular-sample/promise-deferred.html at master · jeado/web-angular-sample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html ng-app="demo-app">
	<head>
		<meta charset="UTF-8">
		<title>Promise와 Deferred 예제</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<script type="text/javascript" src="libs/angular/angular.js"></script>
		<script>
		angular.module('demo-app', [])
		.controller('mainCtrl', ['$scope','$timeout', function ($scope, $timeout) {
			var threeSecPromise = $timeout(function() {
				return $scope.answer;
			},3000);

			threeSecPromise.then(function(val) {
				if(val == 39){
					$scope.result="맞았어요.";
				}else{
					$scope.result="틀렸어요.";
				}
			},function () {
				$scope.result="너무 어려웠나요?";
			});

			threeSecPromise.finally(function() {
				$scope.info = "다시 시작하려면 refresh 해주세요."
			});

      $scope.giveUp = function() {
      	$timeout.cancel(threeSecPromise);
      };
		}]);
		</script>
	</head>
<body ng-controller="mainCtrl">
	<div class="container">
		<h1>3초안에 답을 말하세요!</h1>
		<div class="well clearfix">
			<div>10-1+29+2-1 = <input ng-model="answer" ng-disabled="result"></div>
			<div class="pull-right">
				<button class="btn btn-info" ng-click="giveUp()">포기</button>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<p class="well">{{result}} <br> {{info}}</p>
			</div>
		</div>
	</div>
</body>
</html>