AngularJS에서 로딩바를 1초마다 갱신하려고 setInterval( ) 을 사용하였으나,
최초에 한번만 바인딩 되고 이후에 적용이 되지 않는 문제가 있다.
API 문서를 살펴보니 AngularJS는 $interval 를 사용한다고..
시작할때는 $interval( func, time )
종료할때는 $interval.cancel( id )
$scope.progress = 0; var interval = $interval(function() { if ($scope.progress >= 100) { $interval.cancel(interval); interval = undefined; return; } var current = $scope.progress + 10; $scope.progress = current; console.log("progress : " + current); }, 1000);
$scope.cancel = function() { if (confirm("작업을 취소하시겠습니까?")) { $location.path('/notice', false); $interval.cancel(interval); interval = undefined; } }; |
Progress는 ng-attr-value 로 지정을 해야 IE까지 정상 동작함
<progress ng-attr-value="{{ progress }}" max="100"></progress>
참고 : https://docs.angularjs.org/api/ng/service/$interval