吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

$timeoutの使い方

2013年12月13日 / category : angularjs, lab, その他

$timeoutの使い方の紹介をします。
$timeoutは、window.setTimeoutを使用するための関数です。
controllerメソッド内で使う方法と、directiveメソッド内で使う方法を2パターン。
個人的には、directiveメソッド内で使用した方が良い気がします。

A: controllerメソッド内で$timeoutを使用

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<button ng-click="stop()">stop time</button>
<button ng-click="play()">play time</button>
<p ng-bind="timeout"></p>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', '$timeout', function($scope, $timeout){

	$scope.timeout;

	var timeoutId;

	$scope.stop = function(){
		$timeout.cancel(timeoutId);
	};

	$scope.play = function(){
		$timeout.cancel(timeoutId);
		updateLater();
	};

	var updateLater = function(){
		timeoutId = $timeout(function(){
			updateTime();
		}, 1000);
	};

	var updateTime = function(){
		$scope.timeout = new Date();
		updateLater();
	};

	updateLater();

}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/15/0/

B: directiveメソッド内で$timeoutを使用

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<button ng-click="stop()">stop time</button>
<button ng-click="play()">play time</button>
<p timeout></p>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){

}]);

myApp.directive('timeout', function($timeout){
	return function(scope, element, attrs){

		var _timeoutId;

		scope.stop = function(){
			$timeout.cancel(_timeoutId);
		};

		scope.play = function(){
			$timeout.cancel(_timeoutId);
			updateLater();
		};

		function updateLater(){
			_timeoutId = $timeout(function(){
				updateTime();
			}, 1000);
		}

		function updateTime(){
			element.text( new Date() );
			updateLater();
		};

		updateLater();

	};
});
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/15/1/